Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Scrolling inside text field



  • Hi all,

    I am using QtQuick controls 2. How can we scroll (horizontally) inside the Text field, no. of characters is more than available width? I could not find any property that enables such requirement. I do not want to use arrow key to navigate through the characters entered. Instead I want to allow the user the scroll .

    Any solution?



  • @manny_lp You should create your own control for this like the one below

        Rectangle {
            width: parent.width
            height: 40
            border.color: "red"
    
            ScrollView {
                id: view
                anchors.fill: parent
                clip: true
    
                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                ScrollBar.vertical.policy: ScrollBar.AlwaysOff
    
                Label {
                    text: "This is a very long text which displayed on a Label with horizontal scrolling"
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
        }
    


  • @Mammamia
    Thank you for answering.

    But in the solution you mentioned, text is not editable. I want the user to be able to input text using a virtual keyboard. When the text is longer than visible width of Text field, user should be able to scroll the move through the characters.



  • @manny_lp Sorry I missed that point.

    Then what you may need to do is to create a custom component that encapsulates a Label and TextField stacked. By default, you show the Label as shown above scrollable and when the user clicks on it handle it by a MouseArea and show the TextField with the same text form the Label.



  • @manny_lp Actually I fixed your problem. All you need is changing current "CursorPosition". Here is the code:

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.4
    import Qt.labs.platform 1.0
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        TextField {
            id: control
            x:0
            y:0
            width: 150
            height: 50
            placeholderText: qsTr("Enter description")
    
            onCursorPositionChanged: console.log(control.cursorPosition)
    
        }
    
        Rectangle{
            id:rect
            x:0
            y:50
            width: 150
            height: 50
            color: "red"
            MouseArea {
                anchors.fill: parent
                onWheel: {
                    if(wheel.angleDelta.y>0)
                    control.cursorPosition -= 1
                    if(wheel.angleDelta.y<0)
                    control.cursorPosition += 1
    
                }
            }
        }
    }
    
    

    The only problem is you need to scroll on the red area you can also assign the mouse area to ur textfield area



  • @Yunus said in Scrolling inside text field:

    you can also assign the mouse area to ur textfield area

    It will 'break' the TextFields own mouse handling
    : discussed here https://forum.qt.io/topic/64041/textfield-and-mousearea/10

    maybe possible workaround

    Window {
        visible: true
        width: 640
        height: 480
    
        TextField {
            id: control
            width: 150
            height: 50
    
            MouseArea { // handle TextField scroll and click to change cursor position
                anchors.fill: parent
                enabled: control.focus
                onClicked: control.cursorPosition = control.positionAt(mouseX,mouseY)
                onWheel: {
                    if(wheel.angleDelta.y>0)
                        control.cursorPosition -= 1
                    if(wheel.angleDelta.y<0)
                        control.cursorPosition += 1
                }
            }
        }
    
        Button{//will remove focus from control
            text: 'ok'
            anchors.centerIn: parent
        }
    }
    


  • @LeLev Ahh yes sorry, it is breaking. I didnt know that. Your solution seems better.



  • @LeLev
    I tried you soluttion, it works for scrolling using trackpad. But when we swipe/ scroll using touch (the device I am working on has touch screen, no mouse or external keyboard shall be used) it does not emit "wheel" event and scrolling does not happen!



  • @manny_lp hi, sry i only tested with mouse wheel



  • This can be implemented using ScrollView or Flickable. I create a demo in Github: https://github.com/arkceajin/QtDemos/tree/master/FlickableInput

    I think it shall match the RS that you mentioned.
    But it still needs some improvement for the text cursor which I will try to complete in future.


Log in to reply