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 to TextInput 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



  • @literA2,

    Maybe adding onFocusChanged: cursorPosition= length to your TextField



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



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


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


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



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



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



  • Thanks for all the help, this resolved my issue:

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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.