<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[ColumnLayout in ScrollView : fill width ?]]></title><description><![CDATA[<p dir="auto">Hello,</p>
<p dir="auto">I am trying to have a ColumnLayout in a ScrollView so that if the scrollview becomes larger the column layout and its elements will be updated too.</p>
<p dir="auto">I cannot find a way to do it. The columnlayout always uses the minimum width of its children.</p>
<p dir="auto">How can I do this ?</p>
<p dir="auto">PS: QtQuick.Controls 2.2</p>
<pre><code>ScrollView {
                anchors.margins: margin
                anchors.top: parent.top
                Layout.fillHeight: true
                Layout.fillWidth: true
                clip: true
                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                ScrollBar.vertical.policy: ScrollBar.AlwaysOn

                ColumnLayout {
                    id: listLayout
                    objectName: "listLayout"
                    Layout.fillHeight: true
                    Layout.fillWidth: true

                    Element {
                        status: "test"
                        id: "ID"
                    }
                    Element {
                        status: "test"
                        id: "ID"
                    }
                    Element {
                        status: "test"
                        id: "ID"
                    }
                    Element {
                        status: "test"
                        id: "ID"
                    }
                }
            }
</code></pre>
]]></description><link>https://forum.qt.io/topic/80093/columnlayout-in-scrollview-fill-width</link><generator>RSS for Node</generator><lastBuildDate>Fri, 10 Jul 2026 13:28:50 GMT</lastBuildDate><atom:link href="https://forum.qt.io/topic/80093.rss" rel="self" type="application/rss+xml"/><pubDate>Thu, 08 Jun 2017 13:08:08 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Fri, 09 Jun 2017 11:55:27 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/eeli-k">@<bdi>Eeli-K</bdi></a><br />
Thank you I see my mistake both in the scrollview and in the handling of the windows size and mainLayout size.<br />
Although my columnlayout in the scrolllayout does not fill the width of the scrolllayout.</p>
<p dir="auto">Fixed that with a simple</p>
<pre><code>width: Math.max(implicitWidth, scrollView.availableWidth)
</code></pre>
<p dir="auto">on the columnlayout</p>
]]></description><link>https://forum.qt.io/post/398497</link><guid isPermaLink="true">https://forum.qt.io/post/398497</guid><dc:creator><![CDATA[rXpSwiss]]></dc:creator><pubDate>Fri, 09 Jun 2017 11:55:27 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Fri, 09 Jun 2017 10:19:50 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/rxpswiss">@<bdi>rXpSwiss</bdi></a> Here is one incomplete example which you can modify. Something like this made by you would have helped us in the beginning and saved some typing and time... It can easily be pasted to a main.qml and there's no guesswork involved.</p>
<pre><code>import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: window
    visible: true
    RowLayout {
        anchors.fill: parent
        Button {}
        ToolSeparator {}
        ScrollView {
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            Layout.fillWidth: true

            clip: true
            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
            ScrollBar.vertical.policy: ScrollBar.AlwaysOn

            ColumnLayout {
                id: listLayout
                objectName: "listLayout"
                anchors.top: parent.top

                Button {
                    width: window.width
                    Layout.fillWidth: true
                    text: "lsdjkfkl"
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter

                }
                Button {
                    text: "lkdfjljfuiheff"

                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                }
                Button{}
                Button{}
            }
        }
    }
}
</code></pre>
]]></description><link>https://forum.qt.io/post/398474</link><guid isPermaLink="true">https://forum.qt.io/post/398474</guid><dc:creator><![CDATA[Eeli K]]></dc:creator><pubDate>Fri, 09 Jun 2017 10:19:50 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Fri, 09 Jun 2017 09:40:52 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/jpnurmi">@<bdi>jpnurmi</bdi></a><br />
Wait, I am used to android and how it works for their interface, you are telling me that the scrollview can get modified by his children size because the parent has no fixed height ?</p>
<p dir="auto">The thing is that I have my window, in that a simple row layout that has 3 elements in it :<br />
left menu, separator, scrollview.<br />
Nothing is fixed size because I want the user to be able to make the windows bigger if needed and the elements to adapt to it.<br />
But because of my window doesn't have a fixed size you are telling me that the scrollview will never clip ?</p>
]]></description><link>https://forum.qt.io/post/398459</link><guid isPermaLink="true">https://forum.qt.io/post/398459</guid><dc:creator><![CDATA[rXpSwiss]]></dc:creator><pubDate>Fri, 09 Jun 2017 09:40:52 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Fri, 09 Jun 2017 09:13:10 GMT]]></title><description><![CDATA[<p dir="auto">The parent of the ScrollView is not included at all in your snippet, but as far as I can see, nothing is specifying or limiting the height in the part of the code you showed us. Therefore the ScrollView is growing infinitely to fit the content inside.</p>
<p dir="auto">The best way to present your problem is to give us a complete but minimal example that we can run ourselves. If you leave out essential parts, we're left guessing what else might be there, and we might even misunderstand the whole problem and basically answer to a wrong question. :)</p>
]]></description><link>https://forum.qt.io/post/398450</link><guid isPermaLink="true">https://forum.qt.io/post/398450</guid><dc:creator><![CDATA[jpnurmi]]></dc:creator><pubDate>Fri, 09 Jun 2017 09:13:10 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Fri, 09 Jun 2017 09:04:47 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/jpnurmi">@<bdi>jpnurmi</bdi></a><br />
I want my ScrollView to take all the height by default but not extend after it.</p>
<p dir="auto">So this is at the start<br />
<img src="http://i.imgur.com/hkLP8La.png" alt="start" class=" img-fluid img-markdown" /></p>
<p dir="auto">and if I add a lot of elements<br />
<img src="http://i.imgur.com/yRivJqj.png" alt="then" class=" img-fluid img-markdown" /></p>
<p dir="auto">you can see that the scrollview got bigger and it even pushed the window.</p>
]]></description><link>https://forum.qt.io/post/398442</link><guid isPermaLink="true">https://forum.qt.io/post/398442</guid><dc:creator><![CDATA[rXpSwiss]]></dc:creator><pubDate>Fri, 09 Jun 2017 09:04:47 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Fri, 09 Jun 2017 08:53:58 GMT]]></title><description><![CDATA[<p dir="auto">The latest example has clipping enabled, too. Could you explain what is the remaining problem? If you want the ScrollView to remain at a fixed height, or constrain its height to a certain maximum, either specify the height using a binding, or if the ScrollView itself is in a layout, using Layout.maximumHeight, for instance.</p>
]]></description><link>https://forum.qt.io/post/398431</link><guid isPermaLink="true">https://forum.qt.io/post/398431</guid><dc:creator><![CDATA[jpnurmi]]></dc:creator><pubDate>Fri, 09 Jun 2017 08:53:58 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Fri, 09 Jun 2017 08:40:43 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/jpnurmi">@<bdi>jpnurmi</bdi></a> I agree but my issue is that clipping is enable on my side</p>
]]></description><link>https://forum.qt.io/post/398414</link><guid isPermaLink="true">https://forum.qt.io/post/398414</guid><dc:creator><![CDATA[rXpSwiss]]></dc:creator><pubDate>Fri, 09 Jun 2017 08:40:43 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Fri, 09 Jun 2017 07:39:13 GMT]]></title><description><![CDATA[<p dir="auto">The main purpose of the previous example was to show a simple expanding element. What you do inside that element and whether you enable clipping is up to you.</p>
<pre><code>import QtQuick 2.9
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.2

ApplicationWindow {
    id: window
    width: 360
    height: 360
    visible: true

    ScrollView {
        id: scrollview
        anchors.fill: parent
        anchors.margins: 60

        ScrollBar.vertical.policy: ScrollBar.AlwaysOn
        ScrollBar.vertical.visible: ScrollBar.vertical.size &lt; 1

        ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
        ScrollBar.horizontal.visible: ScrollBar.horizontal.size &lt; 1

        clip: true
        padding: 1

        ColumnLayout {
            spacing: 20
            width: Math.max(implicitWidth, scrollview.availableWidth)
            Repeater {
                model: 5
                RowLayout {
                    // setting Layout.fillWidth for the RowLayout is technically unnecessary,
                    // because layouts have it on by default, but for the sake of clarity,
                    // if you use anything else than a layout
                    Layout.fillWidth: true

                    // set Layout.fillWidth for the elements inside the RowLayout to make them expand
                    Button { text: "Foo"; Layout.fillWidth: true }
                    Button { text: "Bar"; Layout.fillWidth: true }
                    Button { text: "Baz"; Layout.fillWidth: true }
                }
            }
        }
    }

    Rectangle {
        border.color: "red"
        color: "transparent"
        anchors.fill: scrollview
        opacity: 0.1
    }
}
</code></pre>
]]></description><link>https://forum.qt.io/post/398400</link><guid isPermaLink="true">https://forum.qt.io/post/398400</guid><dc:creator><![CDATA[jpnurmi]]></dc:creator><pubDate>Fri, 09 Jun 2017 07:39:13 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Fri, 09 Jun 2017 05:32:24 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/jpnurmi">@<bdi>jpnurmi</bdi></a><br />
Doesn't work.<br />
The element are not growing when I make the window larger and also, the scrollview never clip vertically, meaning that with too much element it will make my window bigger (taller).</p>
<p dir="auto">here is the start<br />
<img src="http://i.imgur.com/KwAvDqJ.png" alt="first" class=" img-fluid img-markdown" /></p>
<p dir="auto">When I add elements the scrollview gets bigger and do not clip<br />
<img src="http://i.imgur.com/GMrOiPj.png" alt="second" class=" img-fluid img-markdown" /></p>
<p dir="auto">Then as you can see if I make the windows larger it doesn't change the elements<br />
<img src="http://i.imgur.com/VlgNktG.png" alt="third" class=" img-fluid img-markdown" /></p>
]]></description><link>https://forum.qt.io/post/398380</link><guid isPermaLink="true">https://forum.qt.io/post/398380</guid><dc:creator><![CDATA[rXpSwiss]]></dc:creator><pubDate>Fri, 09 Jun 2017 05:32:24 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Thu, 08 Jun 2017 17:50:04 GMT]]></title><description><![CDATA[<p dir="auto">Something like this?</p>
<pre><code>import QtQuick 2.9
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.2

ApplicationWindow {
    id: window
    width: 360
    height: 360
    visible: true

    ScrollView {
        id: scrollview
        anchors.fill: parent

        ScrollBar.vertical.policy: ScrollBar.AlwaysOn
        ScrollBar.vertical.visible: ScrollBar.vertical.size &lt; 1

        ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
        ScrollBar.horizontal.visible: ScrollBar.horizontal.size &lt; 1

        ColumnLayout {
            spacing: 20
            width: Math.max(implicitWidth, scrollview.width)
            Repeater {
                model: 20
                Label {
                    text: "Something very very very loooooooong"
                    Layout.fillWidth: true
                }
            }
        }
    }
}
</code></pre>
]]></description><link>https://forum.qt.io/post/398289</link><guid isPermaLink="true">https://forum.qt.io/post/398289</guid><dc:creator><![CDATA[jpnurmi]]></dc:creator><pubDate>Thu, 08 Jun 2017 17:50:04 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Thu, 08 Jun 2017 13:25:55 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/eeli-k">@<bdi>Eeli-K</bdi></a><br />
Oh yes that was what I was using but didn't work, I am just in the phase of trying everything.<br />
So I retried it and columnlayout still is the size of its children, and the children are set to fill the parent.</p>
]]></description><link>https://forum.qt.io/post/398243</link><guid isPermaLink="true">https://forum.qt.io/post/398243</guid><dc:creator><![CDATA[rXpSwiss]]></dc:creator><pubDate>Thu, 08 Jun 2017 13:25:55 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Thu, 08 Jun 2017 13:20:05 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/rxpswiss">@<bdi>rXpSwiss</bdi></a> You can't use</p>
<pre><code>ScrollView {
 ColumnLayout {
    Layout.fillHeight: true
    Layout.fillWidth: true
</code></pre>
<p dir="auto">because the ColumnLayout isn't inside a Layout. Try anchors.fill: parent instead.</p>
]]></description><link>https://forum.qt.io/post/398242</link><guid isPermaLink="true">https://forum.qt.io/post/398242</guid><dc:creator><![CDATA[Eeli K]]></dc:creator><pubDate>Thu, 08 Jun 2017 13:20:05 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Thu, 08 Jun 2017 13:17:35 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/eeli-k">@<bdi>Eeli-K</bdi></a><br />
QtQuick.Controls 2.2</p>
]]></description><link>https://forum.qt.io/post/398240</link><guid isPermaLink="true">https://forum.qt.io/post/398240</guid><dc:creator><![CDATA[rXpSwiss]]></dc:creator><pubDate>Thu, 08 Jun 2017 13:17:35 GMT</pubDate></item><item><title><![CDATA[Reply to ColumnLayout in ScrollView : fill width ? on Thu, 08 Jun 2017 13:16:54 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/rxpswiss">@<bdi>rXpSwiss</bdi></a> Controls 1 or 2?</p>
]]></description><link>https://forum.qt.io/post/398239</link><guid isPermaLink="true">https://forum.qt.io/post/398239</guid><dc:creator><![CDATA[Eeli K]]></dc:creator><pubDate>Thu, 08 Jun 2017 13:16:54 GMT</pubDate></item></channel></rss>