Silica TextField text is aligned too low

asked 2019-09-07 10:56:21 +0200

Tanghus gravatar image

updated 2019-09-07 11:33:40 +0200

As mentioned in this feature request the Silica TextField doesn't have a property verticalAlignment, and no matter how many hoops you jump through, there are no ways to make it align properly without it. Hence a bug report instead.

As can be seen below, it aligns way off the baseline of a label, even though the labels use AlignBottom: image description

  Label {
      id: fromSymbolLabel;
      text: fromSymbol;
      verticalAlignment: Text.AlignBottom
      horizontalAlignment: Text.AlignRight
  }
  TextField {
      horizontalAlignment: TextInput.AlignHCenter
      // The hoops:
     //_editor.verticalAlignment: TextInput.AlignTop
     //on_EditorChanged: _editor.verticalAlignment = TextInput.AlignTop
    // Component.onCompleted: _editor.verticalAlignment = TextInput.AlignTop
  }
  Label {
        text: ' =    ' + toSymbol + ' ' + qsTr("%L1").arg(result);
        horizontalAlignment: Text.AlignHCenter;
        verticalAlignment: Text.AlignBottom;
  }

Edit: Added Labels for comparizon

edit retag flag offensive close delete

Comments

Purely guess work on my behalf, could it be Qt.Align rather than Text.Align and rather than AlignBottom how about Qt.AlignVCenter? (https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#details)

Also, import QtQuick.Layout 1.0 (contained within Sailfish). For more info, navigate to /usr/lib/qt5/qml/QtQuick/Layouts/plugins.qmltypes

Spam Hunter ( 2019-09-07 15:16:06 +0200 )edit

Not according to the docs:

Valid values for verticalAlignment are TextInput.AlignTop (default), TextInput.AlignBottomTextInput.AlignVCenter.

I'm not quite sure what to do with plugins.qmltypes?

As for layout elements in the same Row or Flow should be aligned equally vertically, if I read the docs right.

Adding topPadding: Theme.paddingSmall to the labels helps a but, but not really the way to go.

Tanghus ( 2019-09-08 03:39:40 +0200 )edit

'plugins.qml types' just tells you what is available to use within that module, it was nothing other than a hint for extra info.

Spam Hunter ( 2019-09-08 12:41:55 +0200 )edit

Also, import QtQuick.Layout 1.0 (contained within Sailfish).

Where you thinking of RowLayout instead of Row?

Tanghus ( 2019-09-08 12:43:36 +0200 )edit

Ah, ok. Guess we sat down at the computer at the same time ;)

Tanghus ( 2019-09-08 12:44:30 +0200 )edit