QML ComboBox - displayed text left-alignment - qt

In QML my ComboxBox has items with large words which cannot be fully displayed in the textfield.
When opening the drop-down the items are getting cut at the right end. For that I use elide: Text.ElideRight. This works fine.
But when I select an item and it is getting displayed on the ComboBox, the Text is "scrolled" to the right and I cannot see the beginning. But I have to see the beginning of the display-text and not the end.
I tried several things with my contentItem-delegate, but thats just for the Items in the DropDown-List and not for the ComboBox-own TextField when the Popup ist closed.
The selected Item has the cursor at the right and the text is scrolled to the right. I want it to be scrolled to the left and maybe cut it at the right end.

Maybe using the proper contentItem? This is working for me.
import QtQuick 2.5
import QtQuick.Controls 2.2
import QtQuick.Window 2.2
Window {
visible: true
width: 300
height: 300
ComboBox {
width: 300
contentItem: Text {
text: parent.displayText
font.family: "Arial";
font.pixelSize: 39;
verticalAlignment: Text.AlignVCenter;
horizontalAlignment: Text.AlignLeft;
elide: Text.ElideRight
}
model: ListModel {
id: model
ListElement { text: "This is an example 0123456789 0123456789" }
ListElement { text: "Another example with long text" }
ListElement { text: "Last example" }
}
}
}

Related

qt 5 qml, when Text control texts are trimed, how to replace chars of "..."

my code
Text {
Layout.topMargin: 5
Layout.preferredWidth: parent.width
Layout.preferredHeight: columnsItem.titleHeight
font: Style.h4
wrapMode: Text.Wrap
maximumLineCount: 2
elide: Text.ElideRight
lineHeight: 1.5
text: BodyViewModelCpp.findMusicPageColumns.getSubitemProperty(
modelData, "title")
}
I want to let left "..." look like the right hand side one.
They are both marked using red rectangle in following screen shot
I think you want to replace the Chinese ellipsis with an alternative right? We can use TextMetrics to determine the elidedText and we can suppress or replace Chinese ellipsis before it is shown in the Text component:
import QtQuick
import QtQuick.Controls
Page {
Frame {
width: 200
Text {
id: itemLabel
width: parent.width
property TextMetrics textMetrics: TextMetrics {
text: "The quick brown fox jumped over the lazy dog"
elideWidth: itemLabel.width
elide: Text.ElideRight
}
text: textMetrics.elidedText.replace(/…$/,"...")
}
}
}
You can Try it Online!

QML text area, prevent resize of text area

I am trying to create a simple window in QML with a huge text area in the center and a couple of buttons at the bottom,
bellow is the code
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Window {
id: mainWindow
width: 500
height: 300
visible: true
title: qsTr("Hello World")
flags: Qt.WindowCloseButtonHint | Qt.CustomizeWindowHint | Qt.Dialog | Qt.WindowTitleHint
ColumnLayout{
anchors.fill: parent
anchors.margins: 5
RowLayout {
Layout.alignment: Qt.AlignTop
TextArea {
text: "Hello world!"
}
}
RowLayout {
Layout.alignment: Qt.AlignBottom | Qt.AlignRight
Button {
text: "Ok"
}
Button {
text: "Cancel"
}
}
}
}
however when i press enter key multiple times enough to reach almost at the bottom of the text area, the button moves because the text area resizes, how do I prevent this?
How do I set the text area so that it doesnt resize and push the buttons out of the window, but still be responsive that if the window resize it maintains its positions like buttons will still be buttom right and text area adjusts based on anchor.
It sounds like you want your TextArea to fill the space above the buttons, but your present code is not doing this. If I add a transparent red Rectangle to fill your TextArea, you can see what is happening:
The reason for this is that, by default, the TextArea is only as large as its text (implicitHeight/implicitWidth). Instead, if you want it to fill the top area, you need to specify Layout.fillHeight and Layout.fillWidth. This also means you maybe shouldn't have to rely on Layout.Alignment. Here is your code updated with these fills specified and some alignment properties removed:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Window {
id: mainWindow
width: 500
height: 300
visible: true
title: qsTr("Hello World")
flags: Qt.WindowCloseButtonHint | Qt.CustomizeWindowHint | Qt.Dialog | Qt.WindowTitleHint
ColumnLayout{
anchors.fill: parent
anchors.margins: 5
RowLayout {
TextArea {
text: "Hello world!"
Layout.fillHeight: true
Layout.fillWidth: true
}
}
RowLayout {
Layout.alignment: Qt.AlignRight
Button {
text: "Ok"
}
Button {
text: "Cancel"
}
}
}
}
You can see the result if we add another transparent colored Rectangle to make it visually clear what is happening:

Can not see full contents of dropdownlist qml

I use combobox in my application. I get trouble when the text of combobox is long. I can't see full content of some options. I want to see full content of text when drop down list open.
This is my code:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
anchors.fill: parent
anchors.topMargin: parent.height * 40 /100
anchors.bottomMargin: parent.height * 40 /100
anchors.leftMargin: parent.width * 40/100
anchors.rightMargin: parent.width * 40/100
ComboBox {
model: ["hello", " text not full text not full"]
font.pointSize: 20
}
}
}
When i click to combobox i just see "text not full text no..." instead of seeing "text not full text not full".
Set a width for the ComboBox that is large enough for the largest text you expect to have. For example:
ComboBox {
model: ["hello", " text not full text not full"]
font.pointSize: 20
width: 240
anchors.centerIn: parent
}
If you want a more exact value, try TextMetrics:
ComboBox {
id: comboBox
model: ["hello", " text not full text not full"]
font.pointSize: 20
width: textMetrics.width
anchors.centerIn: parent
}
// ...
TextMetrics {
id: textMetrics
text: "text not full text not full"
font: comboBox.font
}

Strange behaviour with Text in Rectangle

I have a problem with a Rectangle that should contain Text. Text should be in the Rectangle defined but it goes beyond it.
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle
{
id:listRest
width: parent.width/2.7
height: parent.height/2.5
color: "dimgray"
anchors.left: parent.left
anchors.topMargin: Math.round(parent.height)/12
anchors.margins: Math.round(parent.width)/50
Text {
anchors.fill: parent
anchors.centerIn: parent
text: qsTr("QML (Qt Modeling Language) is a user interface markup language. It is a declarative language for designing user interface–centric applications.")
}
}
}
How can I get Text to be only in Rectangle?
By default, the Text will display its content as it is. So, if the text doesn't contain enough new line and it's too long, the text will be display outside the rectangle.
Use wrapMode: Text.WordWrapto wrap the text in the bounds of the rectangle and
elide: Text.ElideRight to elide the text if it's too long to fit in the rectangle.
Using a wrapMode (a max width)
Or maybe a simple solution that is not elegant, but work. Use "\n" for a new line when is it possible without other over-complicated methods if is just only for a simple small text line.

Property contentItem in Qml

The following Qml code gives the following output (expected):
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.11
Window {
height: 200
width: 200
visible: true
Button {
id: root
text: "Text"
anchors.centerIn: parent
Item {
anchors.fill: parent
Text {
text: "Item.Text"
color: "red"
}
}
}
}
The following code (using contentItem) produces a different output:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.11
Window {
height: 200
width: 200
visible: true
Button {
id: root
text: "Text"
anchors.centerIn: parent
contentItem: Item {
anchors.fill: parent
Text {
text: "Item.Text"
color: "red"
}
}
}
}
The Qt documentation is not very clear, at least for me. The question is what does the property contentItem do? When it should be used?
Short answer: The contentItem is meant for customizing the control and replaces the existing implementation of the visual foreground element by your text.
Long answer:
A Quick Item has a so called "default property" - the data property. By definition, if you add an item as child of another item, it is instead assigned to the default property. Which means the following example:
Item {
Text { text: "test1"}
}
Is actually identical to:
Item {
data: [
Text { text: "test2"}
]
}
If you know look at your example, in the first variant, you simply append a child item to the root button. Since no further information is given, it is placed at the coordinates (0,0) within it's parent.
The contentItem property however is defined in the documentation as follows:
This property holds the visual content item.
In case of a Button it is an internally used Label to display the text property of the button. It exists to modify the appereance of the button.
In your second example, you "customize" the button by replacing the internal label with your custom Text - but without any code to properly position or fill the item. The correct way to declare a content item can be found in the customization guide:
Button {
id: control
text: qsTr("Button")
contentItem: Text {
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: control.down ? "#17a81a" : "#21be2b"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
// ...
}
You could either define it as part of a custom style, or create a MyButton.qml where do exactly this and can then use MyButton in other QML files, giving you a custom styled button whilest keeping the API intact (like beeing able to set the text via the text property etc.)
I hope this was sufficient enough to help you understand how it works.

Resources