I have a qml based application where I have a search field. The field also has an icon to indicate it is a search box. The problem is that when I type the text it overlaps the icon and I would like to basically constrain the text input area to the text field which does not contain the image.
The qml code is as follows:
TextField {
id: searchBox
font.pixelSize: 18
background: Rectangle {
radius: 6
border.color: "#707070"
border.width: 1
Image {
source: "../images/search.png"
anchors.left: parent.left
anchors.leftMargin: 12
anchors.verticalCenter: parent.verticalCenter
}
}
}
The resulting component is rendered as follows:
As you can see the text input area overlaps with the image. Is there a way to ensure that the text input area gets clipped or in this case shifted to the right and that the user cannot add text where the image is rendered?
You can use padding properties
rightPadding: 30
leftPadding: 24
Related
The following code to create a rounded TextField
TextField {
id: usernameTextField
placeholderText: qsTr("username")
width: 250
height: 40
anchors {
top: parent.top
topMargin: giveDetailsLabel.anchors.topMargin + 36
horizontalCenter: parent.horizontalCenter
horizontalCenterOffset: 0
}
background: Rectangle {
radius: 20
border.color: "#C9C9C9"
border.width: 1
}
verticalAlignment: TextField.AlignVCenter
font.pixelSize: 16
font.weight: Font.Normal
font.family: "Open Sans"
leftPadding: 10
}
The problem with the following code, the text is not in the center it's shifted up for some reason and I try many different ways like anchors the background rectangle to fit the parent and it not work, using verticalAlignment: TextField.AlignVCenter not work properly
another question is I have the same exact text field but I used echoMode: TextField.Password to make the password, the password dots are so big, I try to decrease the font but the text also decrease before it converts to dot, so how to decrease the dot only without decrease the text size so user see what they are writing in big font before the character converts, here how it looks on Android
and also again the text shifted up and for dots for character and never center inside the text.
using QT 6.2
I am posting because I want a text the be wrap into a rectangle (if the text is too long, it will be cut and the end of it won't be display)
For now I tried with :
Rectangle {
id: form
property alias px: form.x
property alias py: form.y
property alias pheight: form.height
property alias pwidth: form.width
property ItemControl itemControl
color: itemControl.backgroundColor
border.width: 1
border.color: itemControl.color
radius: 1
Text {
id: text_field
height: parent.height
width: parent.width
anchors.centerIn: parent
text:itemControl.text
color: itemControl.color
font.pixelSize: 16
font.family: robotoMono.name
font.bold: false
wrapMode: text_field.WordWrap
maximumLineCount: 1
}
}
But I don't have the expected result. The text is still continuing after the end of the rectangle. Does anyone knows how to compel the text into the rectangle ?
You used Text.WordWrap but the text only contains one word (the . and underscores aren't treated as word separators). Text.Wrap and Text.WrapAnywhere may be more appropriate in this case. Moreover, maximumLineCount: 1 will limit Text to only show one line.
Consider making the font smaller, the rectangle larger, or redesign the UI for this bit.
Text type has this nice feature fontSizeMode, which tries to fit the font size to the actual size of the visual component. So that when I set the font size to 20 and I resize the window so this font size is too big, it automatically lowers the font size.
Text {
text: qsTr("Text")
font.pointSize: 20
fontSizeMode: Text.Fit
}
Now I wanted to use this functionality with the TextInput type, but there is no fontSizeMode available. So my question is, how can I achieve the same functionality with TextInput? Now, when the font size is set and I downsize the window, the string in the TextInput is cut in half like this:
You can scale the element down to constrain it to a specific width:
Rectangle {
width: 100
height: 50
color: "red"
TextInput {
anchors.centerIn: parent
font.pointSize: 20
text: "test"
scale: Math.min(1, parent.width / contentWidth)
Rectangle {
color: "white"
anchors.fill: parent
z: -1
}
}
}
I sticked with this solution. Bind the font.pixelSize property to the parent height. Although I'm not sure if it is 100% correct, it does exactly what I want. If there is some problem about it, please make me know.
Text {
text: qsTr("Text")
font.pixelSize: 0.1 * parent.height
}
I am developing a Qt program using QML in which a user has to enter a variable-sized input (up to 50 chars). Since the program window is not big enough I cannot accommodate a 50 char-wide input rectangle. I would like the input box ("inputNameField" below) to act as a mask over the text so that the characters that are out of the input box are not visible. Here is my base code:
Rectangle
{
id: inputNameBox
onVisibleChanged: if (visible) textNameInput.forceActiveFocus()
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
color: 'grey'
radius: 5
height: parent.height/8
width: parent.width/4
TextInput
{
id: textNameInput
autoScroll: true
anchors.margins: inputNameBox.radius
anchors.fill: inputNameBox
font.pixelSize: inputNameBox.height/2
maximumLength: 50
horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: TextInput.AlignVCenter
}
}
I have tried using the inputNameField as an OpacityMask over the textNameInput to no avail.
EDIT: duplicate of Custom TextEdit, how to hide TextInput when it goes wide
I am trying to create a button like control in QML which displays an image and also some text under it. My current attempt stands as follows:
Item {
id: button
width: 30
height: 100
property alias text: buttontext
signal clicked
Image {
id: visualImage
anchors.fill: parent
source: "qrc:/images/test.png"
}
Text {
id: buttontext
font.bold: true
text: "Test"
}
}
This has a lot of problems unfortunately. So, at the moment, I am specifying the width and height of the item but this should be calculated based on the width and height of the image and the text. Also, the text is shown at the top and inside the image where I would like to position the text under the image, centered with image horizontally with some margins.
You must use anchors in the Image and in the Text. Example:
Item {
id: button
width: 30
height: 100
property alias text: buttontext
signal clicked
Image {
id: visualImage
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: buttontext.top
source: "qrc:/images/test.png"
}
Text {
id: buttontext
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
font.bold: true
text: "Test"
}
}
Since QtQuick.Controls 2.3 (Qt 5.10), display property was introduced:
This property determines how the icon and text are displayed within the button.
For your case it's AbstractButton.TextUnderIcon
Something I have done in the past as a workaround for this,
create a Rectangle{……} which holds all the 'Button' items, (Text/Image Ect),
It may not be the prettiest way but there is a few variations
Create the 'Image' and 'text' externally (photoshop whatever you choose) then fill your Rectangle with the content, then also set a MouseArea { onClicked {……}} event to that,
Make a Column/Grid/Row within the Rectangle and position your items using that method