Solved TextInput horizontalAlignment is not working
-
The horizontal alignment of Textinput doesn't follow the natural alignment of the text once it is longer than the TextInput width.
I already tried setting a width on it, but didn't work as advised here
Is this a bug?
-
Hello @literA2 ,
Do you have a small sample of your code? I suspect adding also
clip: true
toTextInput
might help. -
@Julien-B Thanks for the reply.
I just resolved the issue, the reason was because I anchored the TextInput into its holder.
But my problem now is how to scroll to the end once it is active. Thanks
-
Maybe adding
onFocusChanged: cursorPosition= length
to yourTextField
-
@Julien-B Yes, I already did that but still the end of the text isn't visible. It is said that autoScroll by default is true, but it isn't scrolling.
And also the selectAll isn't working.
Btw, I set the cursorPosition on the MouseArea onClicked handler that I set within the TextInput.
-
Can you show us your code? It would be easier to understand.
I am testing with this code and I do not encounter your issue.
TextInput { id: textInput x: 128 clip: true width: 256 text:"example very very very very very very very very very long text" color: "white" horizontalAlignment: TextInput.AlignHCenter onFocusChanged: cursorPosition= length }
-
@Julien-B here's my code:
// CustomTextInput.qml
TextInput { id: textInput focus: true clip: true MouseArea { id: mouseArea anchors.fill: parent property int startX: 0 property int startY: 0 onPressed: { startX = mouseX; startY = mouseY; } onPositionChanged: { textInput.cursorPosition = positionAt(mouseX, mouseY, TextInput.CursorBetweenCharacters); textInput.select(positionAt(startX, startY, TextInput.CursorBetweenCharacters), textInput.cursorPosition); } onClicked: { if (!textInput.cursorVisible) { textInput.selectAll(); //this is not working textInput.cursorPosition = textInput.length; } else { textInput.cursorPosition = positionAt(mouseX, mouseY, TextInput.CursorBetweenCharacters); textInput.select(positionAt(startX, startY, TextInput.CursorBetweenCharacters), textInput.cursorPosition) } textInput.forceActiveFocus(); mouse.accepted = false; } } }
Then I used it into another component:
RowLayout { Text { text: "Label" } Item { Layout.fillWidth: true height: textInput.implicitHeight CustomTextInput { Layout.fillWidth: true } } }
-
Is this close to what you want?
RowLayout { width: parent.width //assuming it is not 0 Text { text: "Label" height: textInput.implicitHeight } CustomTextInput { height: textInput.implicitHeight Layout.fillWidth: true horizontalAlignment: TextInput.AlignHCenter } }
From what I understood if you do not specify a
width
forRowLayout
, thewidth
grow itself to adjust it's content, and the right part of yourTextInput
might disappear outside visible area. -
@Julien-B Don't mind the RowLayout, there's a fixed width on it.
I wanted that once the textinput is out of focus, the text is align to left, otherwise align to right.
-
in
TextInput.qml
in yourCustomTextInput.qml
you can add:rightPadding: 5 horizontalAlignment: activeFocus ? TextInput.AlignRight : TextInput.AlignLeft autoScroll: false onActiveFocusChanged: { if(activeFocus){ textInput.cursorPosition = textInput.length; } else { textInput.cursorPosition = 0; } }
if you want to change both the text alignment and the cursor position to show the beginning of the text when there is no active focus.
Or you can add only:
rightPadding: 5 onActiveFocusChanged: { if(activeFocus){ textInput.cursorPosition = textInput.length; } else { textInput.cursorPosition = 0; } }
if you only want to change the cursor position to show the beginning of the text when there is no active focus.
I also add
rightPadding: 5
because without that the cursor is not visible when thetextInput
is full. -
Thanks for all the help, this resolved my issue:
TextInput { autoScroll: activeFocus onActiveFocusChanged: { cursorPosition = activeFocus ? length : 0; } }