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
Forum Updated to NodeBB v4.3 + New Features

Problems with scrollbar for QML textarea

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 1 Posters 425 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.
  • JoeCFDJ Offline
    JoeCFDJ Offline
    JoeCFD
    wrote on 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.

    JoeCFDJ 1 Reply Last reply
    0
    • JoeCFDJ JoeCFD

      @JoeCFD solved the truncation problem with right padding in TextArea

      rightPadding: scrollbar.implicitWidth
      
      JoeCFDJ Offline
      JoeCFDJ Offline
      JoeCFD
      wrote on 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
      • JoeCFDJ JoeCFD

        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.

        JoeCFDJ Offline
        JoeCFDJ Offline
        JoeCFD
        wrote on last edited by JoeCFD
        #2

        @JoeCFD solved the truncation problem with right padding in TextArea

        rightPadding: scrollbar.implicitWidth
        
        JoeCFDJ 1 Reply Last reply
        0
        • JoeCFDJ JoeCFD

          @JoeCFD solved the truncation problem with right padding in TextArea

          rightPadding: scrollbar.implicitWidth
          
          JoeCFDJ Offline
          JoeCFDJ Offline
          JoeCFD
          wrote on 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
          • JoeCFDJ JoeCFD has marked this topic as solved on

          • Login

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