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. How to get the scrollbar to the left side of the window
Forum Updated to NodeBB v4.3 + New Features

How to get the scrollbar to the left side of the window

Scheduled Pinned Locked Moved Solved QML and Qt Quick
5 Posts 2 Posters 806 Views 2 Watching
  • 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.
  • J Offline
    J Offline
    James A
    wrote on last edited by
    #1

    Hai All,

    I am using the scroll bar in the Flickable window , but I want the scroll bar on the left side of the window instead of right. How to do this ?

    b36bae1c-2b6d-44ad-845e-ecf4dc5de640-image.png

    Regards,
    James A

    raven-worxR 1 Reply Last reply
    0
    • J James A

      Hai All,

      I am using the scroll bar in the Flickable window , but I want the scroll bar on the left side of the window instead of right. How to do this ?

      b36bae1c-2b6d-44ad-845e-ecf4dc5de640-image.png

      Regards,
      James A

      raven-worxR Offline
      raven-worxR Offline
      raven-worx
      Moderators
      wrote on last edited by
      #2

      @James-A
      https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#attaching-scrollbar-to-a-flickable

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      1 Reply Last reply
      0
      • J Offline
        J Offline
        James A
        wrote on last edited by James A
        #3

        @raven-worx

        I tried making this below change , but the scroll bar is not visible

        Flickable {
                id : flickable
                width: parent.width
                height: 425
                contentWidth: column.width; contentHeight: column.height
                clip: true
        
                ScrollBar.vertical: ScrollBar {
                        width: 40
                        anchors.top: flickable.top
                        anchors.left: flickable.right
                        anchors.bottom: flickable.bottom
                        policy: ScrollBar.AlwaysOn
               }
        
        

        And adding the below change also does not change the scrollbar to the left

         anchors.left: flickable.left
        
        raven-worxR 1 Reply Last reply
        0
        • J James A

          @raven-worx

          I tried making this below change , but the scroll bar is not visible

          Flickable {
                  id : flickable
                  width: parent.width
                  height: 425
                  contentWidth: column.width; contentHeight: column.height
                  clip: true
          
                  ScrollBar.vertical: ScrollBar {
                          width: 40
                          anchors.top: flickable.top
                          anchors.left: flickable.right
                          anchors.bottom: flickable.bottom
                          policy: ScrollBar.AlwaysOn
                 }
          
          

          And adding the below change also does not change the scrollbar to the left

           anchors.left: flickable.left
          
          raven-worxR Offline
          raven-worxR Offline
          raven-worx
          Moderators
          wrote on last edited by
          #4

          @James-A said in How to get the scrollbar to the left side of the window:

          1. anchoring to the left edge to the right edge hides the scrollbar due to the clip set to true on the flickable

          anchors.left: flickable.right

          1. the example also shows to set the parent to the flickable's parent. currently the scrollbar gets added as content to the flickable

          --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
          If you have a question please use the forum so others can benefit from the solution in the future

          1 Reply Last reply
          0
          • J Offline
            J Offline
            James A
            wrote on last edited by
            #5

            @raven-worx

            Thanks for the guide I was able to fix the problem with the below code

            Flickable {
                    id : flickable
                    x: 0
                    y: 0
                    width: parent.width
                    height: 425
                    contentHeight: rectangle.height
                    contentWidth: rectangle.width
                    clip: true
            
                    ScrollBar.vertical: ScrollBar {
                        width: 40
                        policy: ScrollBar.AlwaysOn
                        parent: flickable.parent
                        anchors.top: flickable.top
                        anchors.left: flickable.left
                        anchors.bottom: flickable.bottom
                    }
            
            1 Reply Last reply
            0

            • Login

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