Scrolling inside text field

manny_lp

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?

Mammamia

@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
            }
        }
    }

manny_lp

@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.

Mammamia

@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.

Yunus

@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

ODБOï

@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
    }
}

Yunus

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

manny_lp

@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!

ODБOï

@manny_lp hi, sry i only tested with mouse wheel

arkceajin

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.