Hello All,
I have noticed a problem with text alignment in TextInput QML objects in AppStudio Player. I added TextInput objects with custom heights based on the screen size and I set the verticalAlignment to TextInput.AlignVCenter, as I saw that in the documentation. I also set horizontalAlignment to TextInput.AlignHCenter. The text is centered as I expect when I run the app with AppStudio, however, when I run the app in AppStudio Player, the horizontal alignment is correct and the vertical alignment is off. Why is the behavior different between the two platforms and is there a way to make it work on both? Below I will show examples of the text alignment in AppStudio and then AppStudio Player both on the same page at the same resolution.
AppStudio:
AppStudio Player:
Thanks,
Keith
Keith,
This is strange.
What version of AppStudio Desktop vs AppStudio Player are you running?
Can you share the code snippet for the TextInput so that we can try to reproduce this issue?
Thank you,
Erwin
Hey Erwin,
The version of AppStudio Player is 3.3.29 and I am using the beta of AppStudio version 4.0.59. I was trying to get a simplified sample for the TextInput and I fixed the issue there. For some reason, when I set the height as a multiple of the height of another object in the same row, it would throw off the alignment. So, I changed the height of the TextInput to be calculated differently and made sure anchors.verticalCenter = parent.verticalCenter and it worked.
However, I also have TextFields in the row, which also are not aligning properly. I wrote a simplfied version of a TextField that is not centering the text in AppStudio Player, but is centering in regular AppStudio.
AppStudio:
AppStudio Player:
TextField {
id: textField
anchors.verticalCenter: parent.verticalCenter
text: defaultCost
horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: TextInput.AlignVCenter
validator: DoubleValidator { decimals: 2 }
color: Qt.black
width: background.width
height: 35
background: Rectangle {
anchors.centerIn: parent
height: parent.height
width: 250
color: Qt.white
border.color: Qt.black
}
}