Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt
  • Unsolved
Collapse
qtws26_logo

The Qt Event of the Year: Qt World Summit 2026

Save Your Spot >
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. ScrollBar in Flickable misbehaving
Qt 6.12 LTS is out! See what's new in the release blog

ScrollBar in Flickable misbehaving

Scheduled Pinned Locked Moved Solved QML and Qt Quick
2 Posts 2 Posters 556 Views 1 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.
  • ocgltdO Offline
    ocgltdO Offline
    ocgltd
    wrote on last edited by ocgltd
    #1

    I have created a TextArea inside a flickable, and when I add lots of newlines the area scrolls as expected. However, although a scrollbar appears when I type more lines than the available height, if I try to drag the scrollbar it resets to fully colored (nothing to drag) and just generally misbehaves. A related problem, if i DOWNARROW to the bottom line then my visible text jumps to the top, even though the cursor remains at the bottom. (And DOWNARROW key calls a scrollbar method).

    What is wrong with my scrollbar?

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    Window {
        id: box
        width: 640
        height: 180
        visible: true
        title: qsTr("ScrollBar Mystery")
    
        Flickable {
            id: inputWrapper
            anchors.fill: parent
    
            ScrollBar.vertical: ScrollBar {
                id: scrollBar
                policy: ScrollBar.AlwaysOn
                anchors.left: box.right
            }
            Keys.onUpPressed: scrollBar.decrease()
            Keys.onDownPressed: scrollBar.increase()
    
            clip: true
             flickableDirection: Flickable.VerticalFlick
            function ensureVisible(r)
            {
                if (contentX >= r.x)
                    contentX = r.x;
                else if (contentX+width <= r.x+r.width)
                    contentX = r.x+r.width-width;
                if (contentY >= r.y)
                    contentY = r.y;
                else if (contentY+height <= r.y+r.height)
                    contentY = r.y+r.height-height;
            }
            TextEdit {
                id: input
                anchors.fill: parent
                text: ""
                focus: true
                wrapMode: TextEdit.Wrap
                onCursorRectangleChanged: inputWrapper.ensureVisible(cursorRectangle)
            }  // TextEdit
        }  // Flickable
    }  // Window
    
    J.HilkJ 1 Reply Last reply
    0
    • ocgltdO ocgltd

      I have created a TextArea inside a flickable, and when I add lots of newlines the area scrolls as expected. However, although a scrollbar appears when I type more lines than the available height, if I try to drag the scrollbar it resets to fully colored (nothing to drag) and just generally misbehaves. A related problem, if i DOWNARROW to the bottom line then my visible text jumps to the top, even though the cursor remains at the bottom. (And DOWNARROW key calls a scrollbar method).

      What is wrong with my scrollbar?

      import QtQuick 2.12
      import QtQuick.Window 2.12
      import QtQuick.Controls 2.12
      
      Window {
          id: box
          width: 640
          height: 180
          visible: true
          title: qsTr("ScrollBar Mystery")
      
          Flickable {
              id: inputWrapper
              anchors.fill: parent
      
              ScrollBar.vertical: ScrollBar {
                  id: scrollBar
                  policy: ScrollBar.AlwaysOn
                  anchors.left: box.right
              }
              Keys.onUpPressed: scrollBar.decrease()
              Keys.onDownPressed: scrollBar.increase()
      
              clip: true
               flickableDirection: Flickable.VerticalFlick
              function ensureVisible(r)
              {
                  if (contentX >= r.x)
                      contentX = r.x;
                  else if (contentX+width <= r.x+r.width)
                      contentX = r.x+r.width-width;
                  if (contentY >= r.y)
                      contentY = r.y;
                  else if (contentY+height <= r.y+r.height)
                      contentY = r.y+r.height-height;
              }
              TextEdit {
                  id: input
                  anchors.fill: parent
                  text: ""
                  focus: true
                  wrapMode: TextEdit.Wrap
                  onCursorRectangleChanged: inputWrapper.ensureVisible(cursorRectangle)
              }  // TextEdit
          }  // Flickable
      }  // Window
      
      J.HilkJ Offline
      J.HilkJ Offline
      J.Hilk
      Moderators
      wrote on last edited by
      #2

      @ocgltd

      add
      contentHeight: input.contentHeight
      to your Flickable


      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      1 Reply Last reply
      1

      • Login

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