Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. ScrollBar right margin in a ListView

ScrollBar right margin in a ListView

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 3 Posters 1.3k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    danilabagroff
    wrote on last edited by
    #1

    I'm confused with margins. How I'm supposed to attach the bar on a right side(without gap) and make a margin for all children(not just for a delegate Component) at the same time?

    My markup:

    ListView {
    	id: feedView
    	Layout.fillWidth: true
    	Layout.fillHeight: true
    	Layout.rightMargin: 10
    
    	delegate: {
    		/// I need rightMargin for all these children
    	}
    	ScrollBar.vertical: ScrollBar {
    		/// @xxx ...but not for bar!
    	}
    }
    
    1 Reply Last reply
    0
    • IntruderExcluderI Offline
      IntruderExcluderI Offline
      IntruderExcluder
      wrote on last edited by
      #2

      Setting delegate width should be fine. Like this:

      ListView {
          ...
          Layout.fillWidth: true
          ...
          delegate: Rectangle {
              width: ListView.view.width - (vsb.visible ? vsb.width : 0)
              ...
          }
          ScrollBar.vertical: ScrollBar {
              id: vsb
          }
      }
      
      1 Reply Last reply
      1
      • Shrinidhi UpadhyayaS Offline
        Shrinidhi UpadhyayaS Offline
        Shrinidhi Upadhyaya
        wrote on last edited by
        #3

        Hi @danilabagroff , subtract the margin value from the width of the delegate

        width: (List View Width) - (Margin Value)
        

        Here is the sample code:-

        ListView {
            id: lView
        
            width: 180
            height: 400
            model: 20
            spacing: 10
        
            delegate: Rectangle {
                width: lView.width - 20 //lView.width - (MarginValue)
                height: 40
                color: "transparent"
                border.color: "red"
                
                Text{
                    text: index
                    anchors.centerIn: parent
                }
            }
        
            ScrollBar.vertical: ScrollBar { id: scrollBar }
        }
        

        Sample Output:-

        0_1564032261415_f0295cb1-6873-42f0-8c6a-22729ec96fb5-image.png

        Shrinidhi Upadhyaya.
        Upvote the answer(s) that helped you to solve the issue.

        1 Reply Last reply
        2

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved