Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Issue with 100% height sizing within TabSet (Firefox, not all skins)

    Hello,

    I have a modal Window with a tabbed form, with one page containing an element that is set up to take up as much vertical space as possible. This causes TabSet to change its height depending on active tab, causing the window to jump up and down.

    This happens in Firefox on Windows (tested on 138.0.1), and works correctly in Chrome.
    Affected themes: Graphite, Enterprise, Enterprise Blue, Black Ops, Tree Fog (others work correctly).

    Simplified test case:
    Code:
    isc.defineClass("DynamicHeightItem", "CanvasItem").addProperties({
      height: "100%", // *
      createCanvas() {
        return isc.Canvas.create({contents: "custom editor", backgroundColor: "lightblue"});
      },
    });
    
    isc.TabSet.create({
      backgroundColor: "gray",
      width: "100%",
      overflow: "visible",
      minHeight: 160,
      paneContainerOverflow: "visible", // *
      tabs: [{
        title: "Tab 1",
        pane: isc.DynamicForm.create({
          height: "100%",
          fields: [
            {name: "f1", showTitle: false, colSpan: 2, type: "DynamicHeightItem"},
          ]
        })
      }, {
        title: "Tab 2",
        pane: isc.Canvas.create({contents: "tab 2"})
      }]
    })
    Click image for larger version

Name:	tabs.png
Views:	56
Size:	8.0 KB
ID:	275734
    Note the 1px difference in tab height. Is this an issue with my code, or a framework bug?

    Tested on:

    #2
    Am I misusing the framework or is this a bug?

    Comment


      #3
      You mention that the TabSet changes size, but is that what you want? If you have paneContainerOverflow:visible, and different sized items, that is basically what you're asking for.

      But then, separately, you are putting something with a height of 100% into a container that is configured to match its contents. So, neither setting gives a means of calculating the height - what were you hoping for?

      Comment


        #4
        The TabSet has minHeight:160, so I was hoping that a member with height:100% wouldn't expand it past that 160 until it grows tall enough. In the example I gave it actually does that when using Chrome, but behaves differently when using the Enterprise skin in Firefox, where it sets the height to 161 when showing the first tab, and 160 when showing the second one.

        For me it looks like some kind of off-by-one sizing difference when using different browsers.
        Last edited by Crack; 4 Jul 2025, 04:33.

        Comment


          #5
          So to clarify, it seems to be doing what you want, except there's an off-by-one issue in the sizing, right?

          There are some native browser issues where we can't get sizing perfect because the browsers have size-reporting bugs related to zoom (both OS-level and browser-level). It's covered here:

          https://smartclient.com/smartclient-...p..browserZoom

          You can also increase the "tolerance" for such bugs (see the docs above).

          What is the ultimate outcome of the 1px offset here? If you have the TabSet in a VLayout, you shouldn't really have a problem since SmartGWT will just reduce the size of the adjacent components, so the end user won't notice a problem.

          Comment


            #6
            Ok, then let's consider my issue closed. Thanks for your detailed response.

            Comment

            Working...
            X