TextInput horizontalAlignment is not working

literA2

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?

Julien B

Hello @literA2 ,

Do you have a small sample of your code? I suspect adding also clip: true to TextInput might help.

literA2

@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

Julien B

@literA2,

Maybe adding onFocusChanged: cursorPosition= length to your TextField

literA2

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

Julien B

@literA2,

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
}

literA2

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

Julien B

@literA2,

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 for RowLayout , the width grow itself to adjust it's content, and the right part of your TextInput might disappear outside visible area.

literA2

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

Julien B

@literA2,

in TextInput.qml in your CustomTextInput.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 the textInput is full.

literA2

Thanks for all the help, this resolved my issue:

TextInput {
  autoScroll: activeFocus
  onActiveFocusChanged: {
    cursorPosition = activeFocus ? length : 0;  
  }
}