I have Qt style sheet (qss) for QLineEdit, using different styles for readonly and editable. Works fine, but if I toggle a QLineEdit to readonly (at runtime) the style does not change.
Is there a way to force a stylesheet update of such a line edit?
As requested, the stylesheet:
QLineEdit {
background: transparent;
border: 1px solid green;
border-radius: 5px;
}
QLineEdit[readOnly="true"] {
background: rgba(40,40,40);
border: 1px solid rgba(50,50,50);
}
After change edit's state try next code:
qApp->style()->unpolish(this);
qApp->style()->polish(this);
Where "this" current QMainWindow or QDialog.
Here my own findings:
The polish / unpolish thing works
However, it is somehow inconvenient as I have to apply it for each QLineEdit object, it does not work for me if I do it on the parent level (e.g. on a dialog with multiple QLineEdits)
What works for me is to force an update like this
widget->setStyleSheet(widget->styleSheet());, by just setting the same stylesheet. I works also on the top level widget, updating multiple child elements.
Related
I have a TableView and trying to fix the cell height through CSS. The following works from java:
myTable.setFixedCellSize(80);
But if I comment that out and rely on the following CSS it doesn't work.
#viewtable .table-row-cell {
-fx-text-background-color: #7f7f7f;
-fx-fixed-cell-size: 80px;
}
The id is set to viewtable, I've already confirmed I'm targeting the proper element as the text color takes affect. And using -fx-cell-size also works fine.
I'm launching this through eclipse and tried running from different environments from javase-1.8 up to 16. The javafx sdk is 17.0.0.1
The fixedCellSize property is part of the TableView class, not the TableRow class. This:
#viewtable .table-row-cell {
-fx-text-background-color: #7f7f7f;
-fx-fixed-cell-size: 80px;
}
Is applying the styles to any TableRow (at least by default) which is a descendent of the node with an ID of #viewtable.
Try the following:
#viewtable {
-fx-fixed-cell-size: 80px;
}
#viewtable .table-row-cell {
-fx-text-background-color: #7f7f7f;
}
I want to change the borders of my textboxes if they are not field. So I do a simple check and the change styles like this:
if(!ui->TextBoxPhone->text().isEmpty() && !ui->TextBoxAddress->text().isEmpty()) {
cout<<"Saved fine \n";
}
else {
if(ui->TextBoxPhone->text().isEmpty()) {
ui->TextBoxPhone->setStyleSheet("border: 2px solid red");
}
if(ui->TextBoxAddress->text().isEmpty()) {
ui->TextBoxAddress->setStyleSheet("border: 2px solid red");
}
}
So the problem I have is that the stylesheet would not update automaticly. It will update however if I click elsewhere.
I already tried using
ui->TextBoxName->style()->unpolish(ui->TextBoxName);
ui->TextBoxName->style()->polish(ui->TextBoxName);
ui->TextBoxName->update();
No luck. Might it be a macbook isue?
here are some screenshots:
as you can see left-border is red
when I click on another textbox both of them update and become red
Solved it... repaint() method did the job;
ui->TextBoxPhone->repaint();
Works for me:
myTextEdit->setStyleSheet("QTextEdit{background: transparent; border: none;}");
Nothing else needed. Make sure to specify correct type for the stylesheet. Or maybe even this will resolve:
myTextEdit->setStyleSheet("{background: transparent; border: none;}");
I found this example on the web on how to implement custom properties accessible from QSS for custom QWidgets: https://qt-project.org/wiki/Qt_Style_Sheets_and_Custom_Painting_Example
Does anyone know how can I implement the widget so that I can have different colors for hover or pressed states?
Current stylesheet looks like this:
SWidget
{
qproperty-lineColor: yellow;
qproperty-rectColor: red;
}
I want to be able to have something like this:
SWidget:hover
{
qproperty-lineColor: blue;
qproperty-rectColor: green;
}
SWidget:pressed
{
qproperty-lineColor: orange;
qproperty-rectColor: violet;
}
Note: I know it is possible to implement mouse events and change the colors using qproperties specific to the mouse events, for example:
SWidget
{
qproperty-lineColor: yellow;
qproperty-rectColor: red;
qproperty-lineColor-hover: orange;
qproperty-rectColor-hover: violet;
}
but I would like to be able to make it work using the original qss/css way.
Regards!
When user hover or pressed widget, you should change some widget property. And make different QSS selector for that properties.
After change property you should make unpolish\polish of application styles.
qApp->style()->unpolish( this );
qApp->style()->polish( this );
Where "this" current window pointer. That "magic" code will help to have affect of appropriate QSS selector.
I inherited a themed application which use Qt as GUI library.
Among other things it has a tree of keywords which is built using QTreeView which behaves WRT to the selected items from the folder pane in the standard way:
Ie. if all the items from selection have the keyword 'Plants' assigned then the checkbox of 'Plants' is checked. If none of the items have the said keyword the checkbox is unchecked and if some of the items from selection have assigned the keyword 'Plants' assigned then the checkbox is grayed.
The problem is that while the above model works ok, when the checkbox is grayed (in 'indeterminate' state), this simply disappears from the screen:
The checkbox is still there (the user can click it and works as expected) but it is invisible.
How can I fix this?
...and because I suspect that it is a problem with the theme, I paste here the relevant (IMHO) part from the theme:
QTreeView::indicator{
border: 0px solid red;
width: 14px;
height: 16px;
}
QTreeView::indicator:unchecked{
image: url(UI:checkbox_unchecked.png);
}
QTreeView::indicator:unchecked:disabled{
image: url(UI:checkbox_unchecked_disabled.png);
}
QTreeView::indicator:checked{
image: url(UI:checkbox_checked.png);
}
QTreeView::indicator:checked:disabled{
image: url(UI:checkbox_checked_disabled.png);
}
QTreeView#UIGroup_TreeView{
background-color: rgb(40, 40, 40);
alternate-background-color: rgb(50, 50, 50);
border: 0px solid black;
}
Any help?
As you can see in docs
A QCheckBox has an indeterminate state that your style is not defining an image for.
You should create images for these:
QTreeView::indicator:indeterminate{
image: url(...);
}
QTreeView::indicator:indeterminate:disabled{
image: url(...);
}
I have a web user control where I have ten asp buttons.
I want that when I hover on these buttons the cursor should change to hand cursor, I am able to do that.
Now I want that when I press a button it should change it's back and fore colors so that it looks selected.
I tried to do that by code but it's not working. Following is my css file content:
.buttonclass
{
background-color: Olive;
cursor: pointer;
}
.selectedItemClass
{
background-color: Blue;
color: White;
}
and on the button click I have written like:
Button btn = sender as Button;
btn.CssClass = "selectedItemClass";
but it's not working any idea or another way to achieve the required behavior.
Your code will only work after post-back, and then the button will remain with the selectedItemClass.
You will need to use client-side code to change the class of your button.
One option would be to use a javascript/jquery solution like:
$(".buttonclass").mousedown(function(){
$(this).addClass("selectedItemClass")
});
$(".buttonclass").mouseup(function(){
$(this).removeClass("selectedItemClass")
});
Have you checked if the class is added or replaced? or you can do:
.selectedItemClass
{
background-color: Blue!important;
color: White!important;
}
to check if the order of your css is ignoring the fact there are two different background-color and the priority of them.