QML tab occasionally stretches off-screen

Question

I have a QML-based GUI with a fixed width that uses the TabView type in several places.

On one page, I have something like this (leaving out most properties except for lateral anchors):

ColumnLayout {
    MyTabsViewSubmenu { // defined below
        Layout.fillWidth: true
        Tab { 
            id: someId
            title: someString
            anchors.fill: parent

            SomeCustomClass {
                id: someId2
                anchors.fill: parent
            }
        }

        // three more tabs defined the same way, with the same anchors...

    }

    // another item below the tabs...
}

MyTabsViewSubmenu is something like this:

TabView {
    Rectanble {
        anchors.fill: parent
    }
    style: TabViewStyle {
        // miscellaneous style stuff
    }
}

One of my four tabs in the ColumnLayout above sometimes stretches off the screen when selected. As far as I can tell, there is nothing special about it compared to the other items used as tabs throughout the GUI. The layout of this tab is something like this:

Item {
    MyTabsViewSubmenu {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: sibling.top

        Tab {
            // no anchors (see below)
            SomeItem {
                anchors.fill: parent
        }
        // ... other tabs....
    }
    Rectangle {
        id: sibling
        anchors.left: parent.left
        anchors.right: parent.right

        // ... stuff....
    }
}

The entire page stretches off the screen: both the sub-tab content and the content in the Rectangle I've shown here as sibling.

I would suspect that possibly the missing anchors.fill: parent in the innermost Tabs might be the problem, except that sibling is not (as far as I can tell* missing any anchors, and I've never seen the tabs stretched offscreen without the sibling being stretched offscreen as well.

It seems entirely unpredictable whether the stretching occurs or the layout is done correctly. Once the layout has stretched off the screen, I can sometimes get it to correct itself by navigating away from that page and back.

I'm using Qt 5.6.1-1 on Debian 7.

EDIT: When I navigate to the "stretched" tab and the bug occurs causing the stretching, the tabs themselves at the top of the page also get "stretched" somewhat. Returning to a different tab un-stretches the tabs.

Consider creating a minimal standalone example that reproduces the problem. We can't try the code, because it has external references and missing parts. Very often, stripping out parts of your application in the process of creating a minimal example makes you realize where the problem is. In general, creating a minimal example is time well spent, because then you can get better help, and in case it turns out to be a bug in the framework, you can simply use it as a testcase for reporting the bug. At that point a missing testcase will significantly reduce the chances of the bug being resolved. — jpnurmi, Sep 16 '16 at 11:23
@jpnurmi I'd love to, but if my description and code snippets above aren't enough to trigger the bug, I frankly have nothing else I can even think to look at as a possible culprit; it's a big app. Even with the full app, the bug is rare enough that it's hard to reproduce, so once I have a minimized example, I won't know if it actually triggers the bug unless I manage to trigger it. My biggest hope for this question at the moment is that someone either (1) has happened to see a similar issue before and knows what to look for to debug it, or (2) knows why anchors might be insufficient here. — Kyle Strand, Sep 16 '16 at 16:08
Maybe it's just me, but I've never been able to tame the `ColumnLayout` when `Layout.fillWidth: true`. Try setting the `Layout.maximumWidth` to something in-between the normal and infinity, so we'll see if it's limited by this value. — Velkan, Sep 18 '16 at 10:08
@Velkan Setting `Layout.maximumWidth` appears to do the trick! Thank you! — Kyle Strand, Sep 27 '16 at 23:52

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

The fix

Setting Layout.maximumWidth (as per Velkan's comment) appears to resolve the issue. Additionally, it appears to make the page load faster.

Observations and testing

It's now about a week and a half since I introduced this change to the code, and the product has been heavily tested since then.

We have discovered a second component that needs Layout.maximumWidth set in order to keep from stretching off the screen, and indeed applying this fix to both the original problematic components has prevented the screen-stretching bug. So this is definitely a valid fix.

Possible root cause (i.e. groundless speculation)

I suspect that the QML engine attempts to size "Layout" objects by starting with the maximum width, then shrinking them to fit (or something like this). If the maximum width is unset, it's set to something like "infinity". Without a maximumWidth, it appears that the auto-shrinking operation sometimes fails, leaving the component stretched offscreen. I suspect that the automatic-resizing code may be impacted by some kind of nondeterminism in the order in which the sizes of different QML components are computed.

QML tab occasionally stretches off-screen

1 Answers1

The fix

Observations and testing

Possible root cause (i.e. groundless speculation)