Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Padding in text field with Text.AlignHCenter

Padding in text field with Text.AlignHCenter

Scheduled Pinned Locked Moved Solved QML and Qt Quick
8 Posts 2 Posters 1.6k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • I Offline
    I Offline
    Imynn
    wrote on 25 Jul 2022, 16:22 last edited by
    #1

    Hello! I have a weird behavior in text field. When the text is longer than the field, and when it's HCenter aligned, padding on the right side appears. Example of code that gives me this problem:

    import QtQuick 2.15
    import QtQuick.Window 2.15
    import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.3
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Hello World")
        ColumnLayout {
            width: 100
            height: 50
            Item {
                Layout.fillWidth: true
                Layout.fillHeight: true
                TextField {
                    anchors.fill: parent
                    horizontalAlignment: Text.AlignHCenter
                    selectByMouse: true
                    focus: true
                    text: "fwqfwqfwqfqwfqwfwqfqwqfwqfwfqwqfwqfwfwqffwqfqwfqwf"
                }
            }
        }
    }
    

    Maybe I am doing something wrong, or it's a qt bug (5.15.2)? I would like to know if there's a workaround for it. For example if I align text to the left, it will be okay and there will be no padding or if I remove Item/ColumnLayout it will be fine too. Help please:)
    d6c9597a-500c-4a31-8c1c-449b72e58e4d-image.png

    1 Reply Last reply
    0
    • I Imynn
      26 Jul 2022, 20:23

      @JoeCFD with long text it works well, but what if the text will be short? Like 3 characters, will it be aligned to the center? Cuz when I try shorted text it's aligned to the left* :(

      J Online
      J Online
      JoeCFD
      wrote on 26 Jul 2022, 20:49 last edited by
      #8

      Just tested it. It aligned to the left.

      But set the width property. horizontalAlignment doesn't usually work without it. Now the following code works for both

      import QtQuick 2.15
      import QtQuick.Window 2.15
      import QtQuick.Controls 2.2
      import QtQuick.Layouts 1.3
      
      Window {
          width: 640
          height: 480
          visible: true
          title: qsTr("Hello World")
          ColumnLayout {
              width: 100
              height: 50
              Item {
                  Layout.fillWidth: true
                  Layout.fillHeight: true
                  TextField {
                      //anchors.fill: parent
                      horizontalAlignment: Text.AlignHCenter
                      selectByMouse: true
                      width : 100
                      focus: true
                      text: "fwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwq"
                     // text: "fwq"
                  }
              }
          }
      }
      
      1 Reply Last reply
      0
      • J Online
        J Online
        JoeCFD
        wrote on 25 Jul 2022, 19:15 last edited by
        #2

        @Imynn said in Padding in text field with Text.AlignHCenter:

        horizontalAlignment: Text.AlignHCenter

        horizontalAlignment: Text.AlignCenter seems ok.

        I 1 Reply Last reply 26 Jul 2022, 08:23
        0
        • J JoeCFD
          25 Jul 2022, 19:15

          @Imynn said in Padding in text field with Text.AlignHCenter:

          horizontalAlignment: Text.AlignHCenter

          horizontalAlignment: Text.AlignCenter seems ok.

          I Offline
          I Offline
          Imynn
          wrote on 26 Jul 2022, 08:23 last edited by Imynn
          #3

          @JoeCFD
          Thank you for the advice, but unfortunately with suggested change the text seems to be aligned to the left, instead of center:( I need short text to be aligned to the center and long text to be without that padding.

          1 Reply Last reply
          0
          • J Online
            J Online
            JoeCFD
            wrote on 26 Jul 2022, 15:22 last edited by
            #4

            I tested your code with qmlscene and horizontalAlignment: Text.AlignCenter makes the text in the center. My Qt version 5.15.2 and OS is Ubuntu 18.04.

            I 1 Reply Last reply 26 Jul 2022, 16:17
            0
            • J JoeCFD
              26 Jul 2022, 15:22

              I tested your code with qmlscene and horizontalAlignment: Text.AlignCenter makes the text in the center. My Qt version 5.15.2 and OS is Ubuntu 18.04.

              I Offline
              I Offline
              Imynn
              wrote on 26 Jul 2022, 16:17 last edited by
              #5

              @JoeCFD
              That's weird actually, because I'm using Qt 5.15.2 too, but im on windows 10 and the compiler i'm using is MSVC2019
              here is the example how it looks like:
              73501bcc-228a-4085-bc93-303ff06c8775-image.png

              1 Reply Last reply
              0
              • J Online
                J Online
                JoeCFD
                wrote on 26 Jul 2022, 17:34 last edited by
                #6

                @JoeCFD said in Padding in text field with Text.AlignHCenter:

                qmlscene

                scrot.png

                import QtQuick 2.15
                import QtQuick.Window 2.15
                import QtQuick.Controls 2.2
                import QtQuick.Layouts 1.3
                Window {
                    width: 640
                    height: 480
                    visible: true
                    title: qsTr("Hello World")
                    ColumnLayout {
                        width: 100
                        height: 50
                        Item {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            TextField {
                                anchors.fill: parent
                                horizontalAlignment: Text.AlignCenter
                                selectByMouse: true
                                focus: true
                                text: "fwqfwqfwqfqwfqwfwqfqwqfwqfwfqwqfwqfwfwqffwqfqwfqwf"
                            }
                        }
                    }
                
                
                I 1 Reply Last reply 26 Jul 2022, 20:23
                0
                • J JoeCFD
                  26 Jul 2022, 17:34

                  @JoeCFD said in Padding in text field with Text.AlignHCenter:

                  qmlscene

                  scrot.png

                  import QtQuick 2.15
                  import QtQuick.Window 2.15
                  import QtQuick.Controls 2.2
                  import QtQuick.Layouts 1.3
                  Window {
                      width: 640
                      height: 480
                      visible: true
                      title: qsTr("Hello World")
                      ColumnLayout {
                          width: 100
                          height: 50
                          Item {
                              Layout.fillWidth: true
                              Layout.fillHeight: true
                              TextField {
                                  anchors.fill: parent
                                  horizontalAlignment: Text.AlignCenter
                                  selectByMouse: true
                                  focus: true
                                  text: "fwqfwqfwqfqwfqwfwqfqwqfwqfwfqwqfwqfwfwqffwqfqwfqwf"
                              }
                          }
                      }
                  
                  
                  I Offline
                  I Offline
                  Imynn
                  wrote on 26 Jul 2022, 20:23 last edited by Imynn
                  #7

                  @JoeCFD with long text it works well, but what if the text will be short? Like 3 characters, will it be aligned to the center? Cuz when I try shorted text it's aligned to the left* :(

                  J 1 Reply Last reply 26 Jul 2022, 20:49
                  0
                  • I Imynn
                    26 Jul 2022, 20:23

                    @JoeCFD with long text it works well, but what if the text will be short? Like 3 characters, will it be aligned to the center? Cuz when I try shorted text it's aligned to the left* :(

                    J Online
                    J Online
                    JoeCFD
                    wrote on 26 Jul 2022, 20:49 last edited by
                    #8

                    Just tested it. It aligned to the left.

                    But set the width property. horizontalAlignment doesn't usually work without it. Now the following code works for both

                    import QtQuick 2.15
                    import QtQuick.Window 2.15
                    import QtQuick.Controls 2.2
                    import QtQuick.Layouts 1.3
                    
                    Window {
                        width: 640
                        height: 480
                        visible: true
                        title: qsTr("Hello World")
                        ColumnLayout {
                            width: 100
                            height: 50
                            Item {
                                Layout.fillWidth: true
                                Layout.fillHeight: true
                                TextField {
                                    //anchors.fill: parent
                                    horizontalAlignment: Text.AlignHCenter
                                    selectByMouse: true
                                    width : 100
                                    focus: true
                                    text: "fwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwq"
                                   // text: "fwq"
                                }
                            }
                        }
                    }
                    
                    1 Reply Last reply
                    0

                    1/8

                    25 Jul 2022, 16:22

                    • Login

                    • Login or register to search.
                    1 out of 8
                    • First post
                      1/8
                      Last post
                    0
                    • Categories
                    • Recent
                    • Tags
                    • Popular
                    • Users
                    • Groups
                    • Search
                    • Get Qt Extensions
                    • Unsolved