[Solved with a workaround] editable/!editable QCombobox with stylesheets

giuliocoluccia

Hi, I have a problem styling a widget derived by QComboBox. This widget gets editable or not editable according to inputs received from the outside. This is to say that it is a QComboBox that can change its editable status during sw execution.

Now, the problem is its styling with Style Sheets syntax, in particular with the text editing section when the combobox is editable. And the behaviour is quite weird. I try to explain in words.

The first time i give focus to the comboBox in the editable status, everything goes fine: the editing section is edited just like I told it in the style sheet, like this:
@
QComboBox{
font: 11pt "Walkway Bold";
}

QComboBox:editable{
background: red;
}@
i.e.: everything is red, the text has walkway font.

Then I cause the QComboBox to be !editable. Again, everything is fine
@QComboBox:!editable{
background: blue;
}@
i.e. the background is blue, the font is walkway
I make the QComboBox become editable again. And now the strange things happen. The QComboBox background is red, BUT the editing section has become white (the effect is a white rectangle within a red one) and the font has turned back to system one. And, moreover, there is NO WAY to make it work again except rebooting the software. It looks like the QComboBox loses the stylesheet, but only in the internal editing part in its editable state...

I hope I explained myself. Have you got any idea?

Darryl DSouza

Could you tell me how do you set the style sheet? There are different ways to do it. What did you do?

giuliocoluccia

Hi Darryl,
thank you very much for your reply. I'm sorry I can't understand your question. The stylesheet is the one I mentioned in my previous post. But maybe you need to know how I applied it. The stylesheet is contained in a text file. In the Project main.cpp, I load the text into a QString, then, I execute the app.setStyleSheet(...). I only mentioned the "critical" part, the whole stylesheet is more complicated. But I tested this very few lines on my object, and the behaviour is still the one I described before. This is just to exclude the fact that other stylesheet lines could cause this. I hope I've been clear.
Thank you in advance for your suggestions.

zgulser

Hi,

The newest style sheet override the most previous one as you might know... And I firstly want to learn if you are sure about including font issue every time you give a style sheet.

If you are, then possible problem could be in editing you may try to type font stuff inside QComboBox:editable{...}.

Finally, as far as I see, you are dealing with the QListView of QComboBox..So you again may try to style QComboBox::QListView:editable{...}

King Regards

giuliocoluccia

Hi,
yes, I know that a stylesheet overrides the previous one, but in my application I set the stylesheet only once to the global QApplication, so this should not be the problem.

I will go ahead with your further suggestion and let you know. In the meanwhile, thank you very much.

giuliocoluccia

I'm very sorry, now I noticed I introduced a typo in my first post, a "!" was missing in the code. Just to be clear: the stylesheet lines I mentioned are not applied everytime I change status to the combobox, but only once at the beginning of the main. Sorry again for my mistake. Hope it's clearer now.

zgulser

It's OK. I already considered it as "!"..But what about the methods I provided above? Did you try any of them? If you did, what's the result?

giuliocoluccia

Hi,
sorry for this very late reply. I tried with the following stylesheets that should implement your suggestions:

@QComboBox:editable{
background: red;
font: 11pt "Walkway Bold";
color: yellow;
}

QComboBox:!editable{
background: blue;
font: 11pt "Walkway Bold";
color: yellow;
}@

This is what happens (very strange behaviour):
If the window has focus, everything is blue. The text color is the usual grey (and not yellow as expected)

I give focus to the window the text background gets red (?), text grey. The dropdown menu (which I have not styled, yet) has yellow text and blue bakground, only the hovered one.

I switch to editable. Everything is red and the text is yellow, as required. Switch to !editable: grey text, red background. Switch to editable again, the text is yellow, but the font shape has been reset, and the background of a small portion of the text is white.

I don't know how to post screenshots...
I also tried with

@QComboBox:editable{
background: red;
font: 11pt "Walkway Bold";
color: yellow;
}

QComboBox:!editable{
background: blue;
font: 11pt "Walkway Bold";
color: yellow;
}

QComboBox::QListView:editable{
background: red;
font: 11pt "Walkway Bold";
color: yellow;
}

QComboBox::QListView:!editable{
background: blue;
font: 11pt "Walkway Bold";
color: yellow;
}@

and the behaviour is exactly the same.

My impression is that there is some element more to style, I still don't understand which one. The style sheet example is not very useful, since it does not style neither the font nor the background of editable qcombobox (better, it sets it to white, hence the "white background bug" is hidden by the background itself...).

I confirm this. I have taken exactly the same code as in "Qt Style Sheets Examples", the one relative to the QComboBox, but changing
@QComboBox:editable {
background: white;
}@

in

@QComboBox:editable {
background: blue;
}@

and the result is exactly the same as in my code. The transition editable->!editable->editable makes the white rect appear around the text. I'm confused.

giuliocoluccia

Finally, I solved this issue with a workaround. My guess is that each time a QComboBox gets the editable state, an internal QLineEdit is created, when it gets not editable the QLineEdit is destroyed (test the lineEdit() function to understand). But each time the QLineEdit is created, the stylesheet is lost, I guess beacause it is not saved in the QComboBox widget.
So, my workaround has been to reimplement the setEditable(bool editable) function. When editable is true, I reapply the stylesheet to the QComboBox. The stylesheet is accessible by the styleSheet() function, if it has been applied to the specific widget. Otherwise, if it has been globally applied to the QApplication, it can be accessed by including <QApplication> and calling qApp->styleSheet().
This would be worth to be reported as a bug, but I don't know how to do it.