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
}
Related
Trying to add text to a round button. Gives the error 'Cannot assign to non-existent property: text'.
RoundButton {
id: circ1
text: qsTr("RoundButton")
anchors.right: parent.right
anchors.rightMargin: 1.0 * ScreenTools.defaultFontPixelWidth
anchors.topMargin: 1.0 * ScreenTools.defaultFontPixelHeight
anchors.top: parent.top
Layout.alignment: Qt.AlignHCenter
//radius: 120
width: 60
height: 60
contentItem: Text {
text: "Plan"
}
//font.pointSize: ScreenTools.smallFontPointSize * ScreenTools.smallFontPointRatio
}
Code works as expected without the text property. It also works for a regular button with the text property. I was under the impression a roundbutton should work identical to a regular button. Any idea where i am going wrong?
I wasn't able to recreate your issue. A couple things:
You have Layout.alignment and anchors.*** These are incompatible I
believe
The text of roundButton is not used as you have set the
contentItem to a static Text{} Item rather setting you text within it to
circ1.text
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" }
}
}
}
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.
I have a TextArea. If I set padding constantly padding working normally.
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TextArea{
font.pixelSize: 20
anchors.fill: parent
wrapMode: TextArea.Wrap
leftPadding: 100 //*parent.width/640
rightPadding: 100 //*parent.width/640
}
}
If I uncomment lines above then I have strange behavior.
What am I doing wrong?
Screenshot
It seems to be a bug, probably some updates are missing, when setting up the width of the contentItem of the ApplicationWindow, so the line lengths are not calculated properly.
If you write:
leftPadding: {
console.log(parent, parent.width)
return 100 * parent.width/640
}
You can see, that the parent.width is initially set to 0 and then changes to 640. When this change happens, there must be something going wrong with the signals.
A resize of the window will update the line lengths, so the proper layout is restored. You might try to file a bugreport on http://bugreports.qt.io to have it fixed.
Other than that, you may give an ID to your ApplicationWindow and use this instead of parent
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
id: win
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TextArea{
font.pixelSize: 20
anchors.fill: parent
wrapMode: TextArea.Wrap
leftPadding: 100 * win.width/640
rightPadding: 100 * win.width/640
}
}
I've been having trouble with different OSs (tried Windows 7 and Ubuntu 13.10) having different font widths and heights. I tried setting pixelSize and pointSize and both results in different sizes in both Arial and Courier font texts (Windows fonts are generally bigger).
Here is an example:
Rectangle {
width: 312
height: 44
Text {
id: text_1
text: qsTr("1234567890123456789012345678901234567890")
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
font.family: "Courier"
font.pointSize: 10
}
Text {
id: text_2
text: qsTr("123456789012345678901234567890")
anchors.top: text_1.bottom
anchors.left: parent.left
anchors.right: parent.right
font.family: "Courier"
font.pointSize: 10
}
Text {
id: text_3
text: qsTr("12345678901234567890123456789012345")
anchors.top: text_2.bottom
anchors.left: parent.left
anchors.right: parent.right
font.family: "Courier"
font.pointSize: 10
}
}
This rectangle's width and height are defined by trial and error to fit the 3 text's in Ubuntu. See screenshots below:
In my application, I'd like one text object (with Courier font) to fill it's parent's width (text is fixed). In another rectangle, I'd like the text objects (more than one, anchored just like in the example above, with Arial font) to fill the parent's height.
Currently, I'm looking for a way to set the parent's width and height dynamically, calculated from the fixed text content, but I can't shake the feeling there's got to be a simpler way to do this.
Any tips are appreciated.
Choosing a parent height/width in this case in a bad idea - as you can see, it's not portable; and what if you decided to change your font later, would you want to recalculate everything? This is something you want to delegate to QML.
I suggest using Layouts, like this :
import QtQuick.Layouts 1.1 // Necessary to use ColumnLayout
ColumnLayout { // A Single Column
Text {
id: text_1
text: qsTr("1234567890123456789012345678901234567890")
// No need for anchoring ! You may want to use Layout.fillWidth: true in some cases
font.family: "Courier"
font.pointSize: 10
}
Text {
id: text_2
text: qsTr("123456789012345678901234567890")
font.family: "Courier"
font.pointSize: 10
}
Text {
id: text_3
text: qsTr("12345678901234567890123456789012345")
font.family: "Courier"
font.pointSize: 10
}
}