I am using JSON to receive data and place it into List. There is a Label displaying the text that I am receiving from the JSON. In some of the cases there is a Link in the text. By default you can't click on the Link from the label. Is there a way to make the Link to be clickable?
Label {
text: "Click here to open browser and get redirected to www.stackoverflow.com";
}
The output is "Click here to open browser and get redirected to www.stackoverflow.com" but the Link to StackOverflow is not clickable.
Use TextArea instead of Label and set property editable to false, it would look same as Label.
Don't forget to set inputMode to either Text or Chat.
TextArea {
text: "http://www.google.com"
editable: false
inputMode: TextAreaInputMode.Text
}
You can actually use HTML in the label itself to style the text as a link, according to the Text Styles documentation. You need to be aware of a few quirks though if you are going to apply any of your own styles, as discussed on the Blackberry Developer support forums here. The example below should work, using the default style which will colour the link blue, with bold and underline:
Label {
text: "<html>Click here to open browser and get redirected to <a href='http://www.stackoverflow.com'>www.stackoverflow.com</a></html>"
}
Note: you may need to set multiline: true on the Label in order to see all of the text, depending on your layout.
You should assign Text.RichText value to "textFormat" property of the Label:
import QtQuick 1.1
Rectangle {
width: 360
height: 360
Text {
text: "Click here"
anchors.centerIn: parent
textFormat: Text.RichText
onLinkActivated: {
Qt.openUrlExternally(link)
}
}
}
Related
I am looking for a way to show a text hint stating the expected input as advice for the user. Take the Google search bar for example:
Is there a property I am missing, or is this something that has to be achieved through scripting?
The property doesn't exist on the Qt Quick input items. You can vote for the feature here.
In the meantime, you can use TextArea from Qt Quick Controls 2.
If you would rather use pure Qt Quick, you can do something similar to what the Controls do and add a Text item above the field:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
width: 300
height: 300
visible: true
TextEdit {
id: textEdit
width: 200
height: 50
property string placeholderText: "Enter text here..."
Text {
text: textEdit.placeholderText
color: "#aaa"
visible: !textEdit.text
}
}
}
This is kinda old but I found another necessity for Android builds.
Since Android only send the text editing signal after you press ok in virtual keyboard, the placeholder remains there. So to avoid it, I recommend:
TextEdit {
id: textEdit
width: 200
height: 50
property string placeholderText: "Enter text here..."
Text {
text: textEdit.placeholderText
color: "#aaa"
visible: !textEdit.text && !textEdit.activeFocus // <----------- ;-)
}
}
If you want one line input then why not use TextField ?
Basically, I have a kendo UI gri with InCell editing. This is what it looks like.
This is what it looks like when I edit a cell.
And this is what I want it to look like.
I don't even know if that's possible, but it's on my requirements list. Any ideas?
Yes You Can , Use the editor property
columns: [
{
field: "Your Field",
title: "Your Field Name",
width: "20%",
editor: function (container, options) {
$('<textarea data-bind="value: ' + options.field + '"></textarea>').appendTo(container);
}
},
as the Text area behaviour you can drag right and bottom to disable dag to bottom use below css
textarea {
min-height: 75px;
resize: vertical !important;
}
How can I set the font size of a TextField element in QML? wanna change size of the placeholderText and also for the text which the user enters.
I tried with a lot of ways without luck!
TextField {
id: name_TextField; horizontalAlignment: Text.AlignHCenter;
Layout.preferredWidth: parentCLayer.width * 0.90; Layout.preferredHeight: 50
style: TextFieldStyle {
font.pixelSize: 20 // This doesn't seem to work either
}
placeholderText: qsTr("Your name here")
}
You can use the style property to customize your TextField. For example:
TextField {
style: TextFieldStyle {
font.pixelSize: 14
}
}
I tried it and it works like a charm
Using the font member of TextField
The TextField type itself has a member font which contains an instance of the QML basic type font. It's sufficient to change the values of the inner-members of the font member of TextField to make the changes you want to see. Note that the color is provided by the TextField itself, not the font type.
TextField {
font.pointSize: 20
font.bold: true
font.family: "Times New Roman"
textColor: "red"
}
Default Style
Custom Style
Using the style member of TextField
If you want to do more in-depth styling of the TextField you can attach a TextFieldStyle to the style member of the TextField. The TextFieldStyle instance also has a font member, though in the IDE it will complain that font has no members if you reference them with dot notation, this may be bug QTCREATORBUG-11186. I believe the proper way to assign values is using group notation by referencing the font property with inner-items as such:
TextField {
style: TextFieldStyle {
background: Rectangle {
color: "red"
radius: 10
}
font {
bold: true
pointSize: 22
}
textColor: "white"
}
}
It could be that bug #11186 is a genuine bug, or maybe by design the font property is TextFieldStyle is null; someone with better Qt/QML knowledge could provide a clearer answer as to that part of the question.
This guide on styling may help: http://wiki.qt.io/Qml_Styling
I am using a non-editable objectPicker and setting the empty text:
this.statePicker = Ext.create('Rally.ui.picker.MultiObjectPicker', {
modelType: 'State',
id: 'statePicker',
matchFieldWidth: false,
editable:false,
emptyText: "Select...",
placeholderText: "Select...",
width: 80,
listeners: {
select: this._getFilter,
deselect: this._getFilter,
scope: this
},
});
I want to format the emptyText (emptyText: "Select...",) to be white with a background color. Using the below CSS, the background color displays perfectly, but the text color stays gray.
.x-form-empty-field {
color: #FFFFFF !important;
background-color: #085478;
}
Ihave tried other classes but none change the font. It stays gray! Please help?
The 'emptyText' is applied to the field using the 'placeholder' HTML5 attribute. The answer is going to vary depending on which browser you are using.
Here is a guide that demonstrates how to style the placeholder text in the various browsers that support it: http://css-tricks.com/snippets/css/style-placeholder-text/
Here is some useful information about the placeholder attribute in general (also includes styling examples): http://www.hongkiat.com/blog/html5-placeholder/
Hope this helps!
I have designed a tool bar where buttons are there,. My requirement is initially it should display one icon and on mouse over the icon should change. For this i have given a class to the button and applied css for this and for hover property applied cssclass:hover with different image. For Example
.cssclass {
background-image: someimage.jpg
}
.cssclass:hover {
background-image: someotherimage.jpg
}
By this in all browser (chrome and IE) it is working but in Firefox the image is not changing.
Can anybody have any idea how to achieve this?
Thanks
Tapaswini
If this is related to ExtJS 4, then you should be adding a overCls like so:
Ext.create('Ext.Button', {
text: 'Click me',
cls: 'normalcls',
overCls: 'someovercls', // right here!
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});
Depending on the ExtJS version, it may apply a prefix of 'x-' to the class name.