Bug with Style Sheets and using Custom Properties

[rianquinn]

In general, I have found custom properties to cause the style sheets to become really buggy. Once you start using custom properties, a single modification to the style sheets can cause the styles to all of a sudden be completely ignored.

For example, I could simply add another widget to the style sheet, with a background-color property set, and all of a sudden everything stops working... like the following

start with (works fine):
@
QLabel[detached="true"] { background-color: red; }
@

modify to the following:
@
QLabel[detached="true"] { background-color: red; }
QSlider { background-color: green; }
@

With this simple modification, the slider would not be green, and the label is all of a sudden no longer red. This happens a lot for me, with all sorts of properties. And most of the problems start once I add a custom property.

Any tips?

[rianquinn]

I was able to remove a lot of the issues by breaking the style sheets apart. In my original version, I put everything into one single style sheet that was loaded by the app and set. In my current version, I broke up the style sheet, and have each custom widget set it's style sheet, so there is only a couple of properties in each style sheet.

This seems to work. The annoying part, is if you combine all of them, it causes the above issues, and randomly changing the names of things, removing things, etc... will fix the issue until you add something else and it all breaks again.

What I don't understand is why it would be fine with the style sheet being broken up but not ok with it being set for all of the widgets in one central place, even if the contents of the style sheets adds up to the same thing.

[SGaist]

Hi,

Sounds like it might be a bug in the parsing of the style sheet. You should have a look at the "bug report system":http://bugreports.qt-project.org to see if it's something known. If not please consider opening a new report providing a minimal compilable example showing the behavior.

[ray4qt]

Can I ask what the 'detached' part is? Looking at the help for QLabel I don't see that listed there.

According to "The Style Sheet Syntax" help item:

"You may use this selector to test for any Qt property that supports QVariant::toString()".

So I'm wondering if 'detached' meets this requirement. If it doesn't then this may bring about the parsing problem SGaist refers to.

[rianquinn]

It does. To use the custom properties, you simply do the following:

@
QLabel *label = new QLabel;
label->setProperty("key", "value");
@

Then in your CSS, you can do the following:

@
QLabel[key="value"]
{
...
}
@

In my case, "detached" is the key, and I set this to true, which is converted to the string version for CSS. That part seems to work fine. It's the use of any custom properties that causes the issues I am seeing.

I agree that it must be a bug, because I should be able to set the CSS for the central widget, and all of the children should take on the properties defined in the CSS from there without issue, but if I include a custom property in this single file, I start to get these random issues with the CSS simply being ignore (and not just one property, but all properties are ignored if it doesn't like the CSS). No errors, or anything of any kind prints out... it just simply ignores the CSS.

If I however, break up the CSS, it works fine which makes no sense.

[Sam]

Did you update the your widget after setting the properties

@QLabel *label = new QLabel;
label->setProperty("key", "value");

label->style()->unpolish(label);
label->style()->polish(label);
label->update();@

try this .

[rianquinn]

Yes, I am doing that. Its not that the lable itself is not getting the properties. The entire CSS file is ignored when I do a

@
centralWidget->setStyleSheet("some resource file"):
@

Normally, when there is an error with my syntax, it will spit out an error, but no errors print. Here is a good example of the CSS

@
QLabel[detached="true"]
{
background-color: red;
}

QSlider
{
background-color: green;
}
@

If I set the central widget to have this CSS, the QLabel is not red, and the QSlider is not green. If I however break the CSS up into two separate files (one for the QLabel, and one for the QSlider) and then do the following:

@
label->setStyleSheet("label CSS");
slider->setStyleSheet("slider CSS");
@

it works fine, even though the CSS is identical as a whole. The really strange part is, if I play around with which property I decide to change (so for example, set the border instead of the background-color), I can get it to work, so its not dying all the time (making it hard to replicate).

So for example, if I did this:

@
QLabel[detached="true"]
{
border: 1px solid red;
}

QSlider
{
border: 1px solid green;
}
@

It might work fine. That is of course until I add something else to the file like

@
QLabel[detached="true"]
{
border: 1px solid red;
}

QSlider
{
border: 1px solid green;
}

QPushButton
{
border: 1px solid blue;
}
@

Then it might stop working again. Note how the thing I added is not using the custom properties.