Results 1 to 2 of 2

Thread: GridLayout in a ScrollView adjust to width change

  1. #1
    Join Date
    May 2024
    Posts
    2

    Default GridLayout in a ScrollView adjust to width change

    Hello everyone,
    We are working on a Qt for WebAssembly application.
    The main component is a GridLayout with 2 columns and we also want to make it work on a mobile screen.
    So based on the width we make the grid with 2 rows and a single column.

    Unfortunately when viewing it on mobile the Flickable id: flick (which is inside ColumnLayout id: left is not showing at all at the bottom in some cases and sometimes only shows a small part of the Flickable .

    Below there is what I mean about showing small part of the Flickable (marked with red).

    Screenshot 2024-05-19 210236.jpg

    I want to make it stretch down and fill the remaining height at the bottom of it as much as possible.

    The code snippet is here: https://gist.github.com/oranmehavi/9...8c0131988c55d4
    Any help with how to achieve this will be much appreciated

  2. #2
    Join Date
    May 2024
    Posts
    2

    Default Re: GridLayout in a ScrollView adjust to width change

    I think I came up with something that seems to work but not sure if this is a good way to do this (I also changed from ScrollView to Flickable because I saw online that it is better suited for touch devices.)

    Qt Code:
    1. Flickable {
    2.  
    3. id: scroller
    4. anchors.fill: parent
    5. contentHeight: main.height
    6. contentWidth: main.width
    7. GridLayout {
    8. id: main
    9. height: scroller.width > 600 ? scroller.height : children.length * 800
    10. width: scroller.width
    11.  
    12. columns: 2
    13.  
    14. states: [
    15. State {
    16. when: root.width <= 600
    17. PropertyChanges {target: left; Layout.row: 1}
    18. PropertyChanges {target: right; Layout.row: 0}
    19. },
    20. State {
    21. when: root.width > 600
    22. PropertyChanges {target: left; Layout.column: 0}
    23. PropertyChanges {target: right; Layout.column: 1}
    24. }
    25. ]
    To copy to clipboard, switch view to plain text mode 

    Basically I set the GridLayout's height to the height of the scroller or to a very high height (800 * children.length) if the width gets narrower (<= 600 in this case).

    Is there a better way to do it or is it "good enough"?

Similar Threads

  1. Replies: 4
    Last Post: 14th July 2016, 14:03
  2. Replies: 0
    Last Post: 9th October 2015, 07:31
  3. Auto adjust width of widget
    By Sjaacko in forum Newbie
    Replies: 4
    Last Post: 7th October 2011, 07:47
  4. How to adjust the a QHeaderView's width
    By culgi in forum Qt Programming
    Replies: 2
    Last Post: 31st January 2008, 08:35
  5. Replies: 1
    Last Post: 19th September 2007, 10:32

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.