qcombobox popup stylesheet

6,069 views
Skip to first unread message

Flavio Portela

unread,
Nov 6, 2012, 9:59:36 AM11/6/12
to andro...@googlegroups.com

Good day.
I’m trying to set the QComboBox popup list but unable to change the font size.
Anyone know how to do this?

Does anyone know how to do this or is qtnecessitas problem?

worked correctly before and not now.

QLabel, QComboBox QAbstractItemView{ color:red; font: 20pt bold;
}
/*or*/
QLabel, QAbstractItemView{ color:red; font: 20pt bold;
}

With QLabel everything happens correctly, with [QAbstractItemView], only the color has changed.

Michael Heiser

unread,
Nov 6, 2012, 11:21:09 AM11/6/12
to andro...@googlegroups.com

Also have a problem regarding QComboBox, I think it was already mentioned. I have Comboboxes which only show highlighted items in green with a white text color.  When I show the list, only the selected item is visible all other content is white. So how can I change the textcolor of not selected items?  Do I have to change the stylesheet for QAbstractItemView?

Thanks for your answers

Willy Gardiol

unread,
Nov 6, 2012, 2:34:43 PM11/6/12
to andro...@googlegroups.com

I am probably repeating myself but widgets (specially input widgets)
are deprecated on mobile platforms. This has been a Qt decision some
time ago. QML is supposed to be the way to go.

Many people don't like it (including me) but this remains the fact and
it's a pain in the *ss to fix. It's not Necessitas related. Symbian
developers have been dealing with these issues for ages, until QML come
along.



Il 06.11.2012 18:21 Michael Heiser ha scritto:
> Also have a problem regarding QComboBox, I think it was already
> mentioned. I have Comboboxes which only show highlighted items in
> green with a white text color.  When I show the list, only the
> selected item is visible all other content is white. So how can I
> change the textcolor of not selected items?  Do I have to change the
> stylesheet for QAbstractItemView?
>
> Thanks for your answers
>
> VON: andro...@googlegroups.com [mailto:andro...@googlegroups.com]
> IM AUFTRAG VON Flavio Portela
> GESENDET: Dienstag, 6. November 2012 16:00
> AN: andro...@googlegroups.com
> BETREFF: qcombobox popup stylesheet
>
> Good day.
> I’m trying to set the QComboBox popup list but unable to change the
> font size.
> Anyone know how to do this?
>
> Does anyone know how to do this or is qtnecessitas problem?
>
> worked correctly before and not now.
>
> QLabel, QComboBox QAbstractItemView{ color:red; font: 20pt bold;
> }
> /*or*/
> QLabel, QAbstractItemView{ color:red; font: 20pt bold;
> }
>
> With QLabel everything happens correctly, with [QAbstractItemView],
> only the color has changed.

--
Willy Gardiol
wi...@gardiol.org
www.gardiol.org
www.trackaway.org -> Track YOUR way the way you want!

Joost Bloemen

unread,
Nov 6, 2012, 3:29:14 PM11/6/12
to andro...@googlegroups.com
It's not that bad.
Just put this on top of your mainwindow code:
int dpi=QPaintDevice::physicalDpiX();
fontsize=dpi/8; //change to your liking
QFont myf=QApplication::font();
myf.setPixelSize(fontsize);
QApplication::setFont(myf);
All font-sizes seem to be much more predictable (ie the same) then, as
long as you keep all the font sizes in widgets (in UI Designer) the same
as the parent. Only change it when needed, for instance to have some
pieces of smaller text. Or just change the font size for each
class/widget in code.

Use the fontsize as a global indication for all required sizes and you
can do lots of good stuff with layouts.

Best regards,
Joost Bloemen
------------------
Technica Del Arte b.v.
Frankenstraat 148
6224 GT Maastricht
The Netherlands, Europe
T 0031 43 321 94 99
F 0031 85 878 64 02
M 0031 6 140 46 066
Skype: technicadelarte
http://www.technicadelarte.com
http://www.luci.eu

Sebastian Diel

unread,
Nov 6, 2012, 3:30:23 PM11/6/12
to andro...@googlegroups.com
> I am probably repeating myself but widgets (specially input widgets)
> are deprecated on mobile platforms. This has been a Qt decision some
> time ago. QML is supposed to be the way to go.
Willy, you are :-). That's absolutely important to know when starting to
work on a new project - and of course I will learn to use QML the next
time.

But what I want to do is a _porting_ job. A big part of my project bases
on QWidgets. Although it seems to be only the comboBox (yet) that causes
problems.
I can not write the whole program anew on QML basis. I will rather drop
the android port entirely. Getting this thing to work (on Windows) has
cost me a year, and that was my sabattical - I'm teaching daytime again
now: theres no way of doing it all over again.

I think it is absolutely worth the time and bandwidth to ask for and
exchange information about trying to fix or hack around the issues - it
might help a few projects to make it to Android.
A little (better use QML!) disclaimer might always be helpful, though -
I can see that.
> Many people don't like it (including me) but this remains the fact and
> it's a pain in the *ss to fix. It's not Necessitas related. Symbian
> developers have been dealing with these issues for ages, until QML
> come along.
I would highly appreciate any hint on what you did achieve in fixing
before you tossed widgets aside.
Perhaps those things might help a port succeed. Then your *ss's pain
would not have been in vain :-)

A quite different idea - and maybe a very stupid question: I assume that
I can't just "use QML controls on a QWidget", right? I have to admit
that I havent dealt with QML yet. Is it possible to just replace the
QComboBox with a similar QML element?

If I could just change the few things that are not working properly, I
would indeed set my sails into that sea.
(No long explanation necessary - if this makes no sense, just say forget
it. Otherwise I will have to properly inform myself anyway.)

Best regards and thank you for all your valuable work here!

Sebastian








Willy Gardiol

unread,
Nov 6, 2012, 3:50:21 PM11/6/12
to andro...@googlegroups.com

> I would highly appreciate any hint on what you did achieve in fixing
> before you tossed widgets aside.
> Perhaps those things might help a port succeed. Then your *ss's pain
> would not have been in vain :-)

When i started my project (Symbian) QML was not avaiable. Thus after
bitching a lot i finally decided to write my widgets from scratches.
They are tailored for mobile and do not look good on PC, but are ok for
mobile screens. The app is called track@way and there is also a port for
Necessitas. You can try it out (www.trackaway.org you can find the apk)
to have an idea.

It took me a lot of time and are kind of customized for my needs... but
i could share them, be clear they have not been designed to be shared
tough so they might require some work and the interface is not 1-to-1
with replacing widgets. In some cases is simpler. They are GPL, or at
least i can make them GPL.

For example i had to rewrite the basic layouts because the default ones
(QV/HBoxLayout mainly) do have too much margins and spacing for a small
screen. Also i have rewritten all the buttons (push, check, radio...) to
waste less space and be less heavy (on a symbin phone QPushButton has
quite a lag on presses!), implemented list boxes and text areas which do
support kinetik scrolling and such, combo boxes (with full-screen items
election), and some more. They do not support stylesheets, but use the
Qt QPalette system.

> A quite different idea - and maybe a very stupid question: I assume
> that I can't just "use QML controls on a QWidget", right? I have to
> admit that I havent dealt with QML yet. Is it possible to just
> replace
> the QComboBox with a similar QML element?

Unfortunately QML is a different concept. But you _can_ mix widgets and
QML easily, but i have not done it yet too. Not eouch time to work on
features, even less to rewrite the GUI!

> If I could just change the few things that are not working properly,
> I would indeed set my sails into that sea.
> (No long explanation necessary - if this makes no sense, just say
> forget it. Otherwise I will have to properly inform myself anyway.)

Somebody correct me if i am wrong... but you can embed QML stuff inside
a QGraphicScene (or somethingf similar, i don't have my QtCreator to
check right away), and you can put widgets inside QML UIs too...

jenna

unread,
Nov 6, 2012, 4:29:32 PM11/6/12
to andro...@googlegroups.com
Your link for source code points here (http://hg.trackaway.org/) and that page asks me for a user name and password, which I dont have, so I can't see the source.

Willy Gardiol

unread,
Nov 7, 2012, 4:22:51 AM11/7/12
to andro...@googlegroups.com, Necessitas Devel

Hi!
yes i had to pull public access for a number of reasons.

I have created a dedicated repoisitory for the widget controls.

You can reach it here:

http://hg.gardiol.org/index.cgi/ftcontrols

username: necessitas
password: necessitas

the repository is open for pull and push.

I am sharing this code with all of you with the only following
condition: if you do improve them, you must push back the changes. This
is very important to help more people.

ok?

beware: i have used them only on my app so far, so there might be some
dependent code at least in the initialization code. Check the FTControls
class, whose init method must be called.

Michael Heiser

unread,
Nov 7, 2012, 6:04:37 AM11/7/12
to andro...@googlegroups.com
After searching the internet, I finally have a way to style the QComboBox for my needs. I use it in a global stylesheet.

Here is a link for more information:
http://doc.qt.digia.com/main-snapshot/stylesheet-examples.html
And this section solved my issue:
QComboBox QAbstractItemView {
border: 1px solid darkgray;
color: black;
background: white;
selection-background-color: lightgray;
}

Greetings and I appreciate the great work of the dev team :)

-----Ursprüngliche Nachricht-----
Von: andro...@googlegroups.com [mailto:andro...@googlegroups.com] Im Auftrag von Willy Gardiol
Gesendet: Mittwoch, 7. November 2012 10:23
An: andro...@googlegroups.com; Necessitas Devel
Betreff: Re: qcombobox popup stylesheet

Flavio Portela

unread,
Nov 9, 2012, 8:09:01 AM11/9/12
to andro...@googlegroups.com, jo...@technicadelarte.com
Worked properly, thank you:

implementation:

void ffrmsyspri00::doInit()
{
#ifdef Q_OS_ANDROID
    //CORRECAO PARA FONT MUITO GRANDE DO COMBOBOX
    int dpi=QPaintDevice::physicalDpiX();
    int fontsize=dpi/12;                                //change to your liking
    QFont myf=QApplication::font();
    myf.setPixelSize(fontsize);
    QApplication::setFont(myf);
#endif
}

Sebastian Diel

unread,
Nov 10, 2012, 4:04:22 PM11/10/12
to andro...@googlegroups.com
Am 07.11.2012 10:22, schrieb Willy Gardiol:
> I have created a dedicated repoisitory for the widget controls.
> http://hg.gardiol.org/index.cgi/ftcontrols
> username: necessitas
> password: necessitas
>
Thank you very much, Willy!
> I am sharing this code with all of you with the only following
> condition: if you do improve them, you must push back the changes.
> This is very important to help more people.
Absolutely. It'l take me some time to dig into that, you (as probably
everyone on this list) are a far better programmer than I am and I (have
to) learn quite valuable stuff from each bit of code I see around here.

Regards and respect,
Sebastian

Willy Gardiol

unread,
Nov 11, 2012, 3:31:28 AM11/11/12
to andro...@googlegroups.com
> Absolutely. It'l take me some time to dig into that, you (as probably
> everyone on this list) are a far better programmer than I am and I
> (have to) learn quite valuable stuff from each bit of code I see
> around here.

Honestly i don't think so! First dig in to the code, than beat me up
and whack me on the head for my crappy programming please!

that code never had any kind of code-review or such :) and i am well
aware it's not really following the best Qt practices.

Sebastian Diel

unread,
Nov 11, 2012, 8:33:34 AM11/11/12
to andro...@googlegroups.com
Hi,

I think I've finally found out why the editable combo boxes were not properly styleable. It's a Qt bug addressed here:
https://bugreports.qt-project.org/browse/QTBUG-19837

The workaround is just too simple:
ui->comboBox->lineEdit()->setStyleSheet(styleSheet("whatever you want to style it to"));

My full styleSheets looks like this. There may be some superfluous or contradicting elements. But it works on Android and Windows, together with Joosts/Flavios implementation below:
(Note that the arrows are still missing, but I think - without having tried it yet - that i should probably get the arrow to work with loading an image instead of using the built-in arrow.)

ui->nameComboBox->setStyleSheet(
                "QComboBox { border: 1px solid rgb(90, 31, 0); "
                "border-radius: 3px; padding: 1px 18px 1px 3px; "
                "min-width: 6em; min-height: 30px }"
                "QComboBox QAbstractItemView::item {min-height:40px;}"
                "QComboBox QAbstractItemView::item:hover {"
                        "min-height:40px; color: rgb(253, 231, 146);"
                        "background: rgb(90, 31, 0); }"
                "QComboBox { "
                        "margin: 0px;"
                        "padding: 0px;"
                        "min-height: 40px;"
                        "background-color: rgb(90,31,0); color: rgb(253,231,146);"
                "}"
                "QComboBox::drop-down { width: 30px;}"
                "QComboBox QListView QScrollBar {"
                          "background: rgb(90, 31, 0); "
                           "color: rgb(253, 231, 146); "
                           "width: 30px;}"
                "margin: 0px; padding: 0px; border: 0px; min-height: 40px; "
                 "background-color: rgb(90, 31, 0); color: rgb(253, 231, 146);"
                );
   ui->nameComboBox->lineEdit()->setStyleSheet(
                "background: rgb(90, 31, 0); "
                "color: rgb(253, 231, 146);"
                "selection-background: lightgray;"
                );

Sebastian Diel

unread,
Nov 11, 2012, 6:24:59 PM11/11/12
to andro...@googlegroups.com
Hi again,

for the QSpinBox/QDateEdit/QTimeEdit widgets you can't just set the ->lineEdit()->setStyleSheet because the lineEdit is protected.
It's very easy though, to subclass these with a few lines and have an editor method that gives back the LineEdit* to set the styleSheet onto.

header:
----------------

class
MySpinBox: public QSpinBox
{
public:
    MySpinBox(QWidget *parent);
    QLineEdit * editor () const;
};

implementation:
----------------

MySpinBox::MySpinBox(QWidget *parent):QSpinBox(parent)
{
    editor()->setAlignment(Qt::AlignCenter);
}
QLineEdit * MySpinBox::editor () const
{
    return this->lineEdit();
}

use:
----------------
spinBox->editor()->setStyleSheet([see below])

With the above Widgets you should take care, not to set the whole padding to zero as you thus take away the space these widgets need to place their buttons.

At least in my program this had rendered my right button (I have placed one subcontrol on either side of the widget for better touch control) useless.

If you specifically set padding-top and padding-bottom zo zero it all seems to work out fine.


HTH,
Sebastian
Reply all
Reply to author
Forward
0 new messages