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. Problems with scrollbar for QML textarea
Servers for Qt installer are currently down

Problems with scrollbar for QML textarea

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 1 Posters 419 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.
  • J Offline
    J Offline
    JoeCFD
    wrote on 19 Jan 2024, 17:07 last edited by JoeCFD
    #1

    I got some piece of following code from
    https://stackoverflow.com/questions/54524168/how-to-make-a-textarea-have-a-max-size-and-a-scroll-bar
    it works. But I have a few issues with it after I added gutter to the scrollbar

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    
    ApplicationWindow {
        width: 400
        height: 400
        color: "#444"
        visible: true
    
        Rectangle {
            anchors.fill: flickable
        }
    
        Flickable {
            id: flickable
            width: parent.width
            height: Math.min(contentHeight, 300)
            contentWidth: width
            contentHeight: textArea.implicitHeight
    
            TextArea.flickable: TextArea {
                id: textArea
                text: qsTr("Hello, world! Hello, world! Hello, world! Hello, world! ")
                wrapMode: Text.WordWrap
            }
    
            ScrollBar.vertical: ScrollBar {
                id: scrollbar
                anchors.right: parent.right
                policy: Scrollbar.AsNeeded
    
               background: Rectangle {
                    id: gutter
                    width: 20
                    color: "black" 
               }
            }
        }
    }
    

    I would prefer the gutter disappears if scrollbar is not needed. But it is on all the time.
    Another problem is that scrollbar truncates or blocks my html text a bit.
    How to keep scroll thumb always on if scroll bar is needed. It disappears when there is no scroll event.

    J 1 Reply Last reply 19 Jan 2024, 17:21
    0
    • J JoeCFD
      19 Jan 2024, 17:21

      @JoeCFD solved the truncation problem with right padding in TextArea

      rightPadding: scrollbar.implicitWidth
      
      J Offline
      J Offline
      JoeCFD
      wrote on 19 Jan 2024, 17:59 last edited by JoeCFD
      #3

      @JoeCFD solved the problem of scrollbar always on with

      ScrollBar.vertical: ScrollBar {
                  id: scrollbar
                  anchors.right: parent.right
                  policy: Scrollbar.AsNeeded
                  visible: flickable.contentHeight > flickable.height
      

      not sure why policy: Scrollbar.AsNeeded does not help.

      1 Reply Last reply
      0
      • J JoeCFD
        19 Jan 2024, 17:07

        I got some piece of following code from
        https://stackoverflow.com/questions/54524168/how-to-make-a-textarea-have-a-max-size-and-a-scroll-bar
        it works. But I have a few issues with it after I added gutter to the scrollbar

        import QtQuick 2.15
        import QtQuick.Controls 2.15
        
        ApplicationWindow {
            width: 400
            height: 400
            color: "#444"
            visible: true
        
            Rectangle {
                anchors.fill: flickable
            }
        
            Flickable {
                id: flickable
                width: parent.width
                height: Math.min(contentHeight, 300)
                contentWidth: width
                contentHeight: textArea.implicitHeight
        
                TextArea.flickable: TextArea {
                    id: textArea
                    text: qsTr("Hello, world! Hello, world! Hello, world! Hello, world! ")
                    wrapMode: Text.WordWrap
                }
        
                ScrollBar.vertical: ScrollBar {
                    id: scrollbar
                    anchors.right: parent.right
                    policy: Scrollbar.AsNeeded
        
                   background: Rectangle {
                        id: gutter
                        width: 20
                        color: "black" 
                   }
                }
            }
        }
        

        I would prefer the gutter disappears if scrollbar is not needed. But it is on all the time.
        Another problem is that scrollbar truncates or blocks my html text a bit.
        How to keep scroll thumb always on if scroll bar is needed. It disappears when there is no scroll event.

        J Offline
        J Offline
        JoeCFD
        wrote on 19 Jan 2024, 17:21 last edited by JoeCFD
        #2

        @JoeCFD solved the truncation problem with right padding in TextArea

        rightPadding: scrollbar.implicitWidth
        
        J 1 Reply Last reply 19 Jan 2024, 17:59
        0
        • J JoeCFD
          19 Jan 2024, 17:21

          @JoeCFD solved the truncation problem with right padding in TextArea

          rightPadding: scrollbar.implicitWidth
          
          J Offline
          J Offline
          JoeCFD
          wrote on 19 Jan 2024, 17:59 last edited by JoeCFD
          #3

          @JoeCFD solved the problem of scrollbar always on with

          ScrollBar.vertical: ScrollBar {
                      id: scrollbar
                      anchors.right: parent.right
                      policy: Scrollbar.AsNeeded
                      visible: flickable.contentHeight > flickable.height
          

          not sure why policy: Scrollbar.AsNeeded does not help.

          1 Reply Last reply
          0
          • J JoeCFD has marked this topic as solved on 19 Jan 2024, 18:00

          1/3

          19 Jan 2024, 17:07

          • Login

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