Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

QComboBox style for choosen item in drop-down list

I want to style the highlighting of chosen item in drop-down of combobox.

The difference to other questions is that I do not want to style "selected" item (hovered over), but to style the already chosen item.

The default is some sort of tick which is painted over text. I want the chosen item to have bold text and no tick.

Or in worst case to just shifth the text to the right, to make the tick visible properly.

What I have is this:

enter image description here

Notice the 17th item which has tick over the number 17.

This is my stylesheet:

QComboBox
{
    subcontrol-origin: padding;
    subcontrol-position: top right;
    selection-background-color: #111;
    selection-color: yellow;
    color: white;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
    border-style: solid;
    border: 1px solid #1e1e1e;
    border-radius: 5;
    padding: 1px 0px 1px 20px;
}


QComboBox:hover, QPushButton:hover
{
    border: 1px solid yellow;
    color: white;
}

QComboBox:editable {
    background: red;
    color: pink;
}

QComboBox:on
{
    padding-top: 0px;
    padding-left: 0px;
    color: white;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
    selection-background-color: #ffaa00;
}

QComboBox:!on
{
    color: white;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #666, stop: 0.1 #555, stop: 0.5 #555, stop: 0.9 #444, stop: 1 #333);
}

QComboBox QAbstractItemView
{
    border: 2px solid darkgray;
    color: black;
    selection-background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #111, stop: 1 #333);
}

QComboBox::drop-down
{
     subcontrol-origin: padding;
     subcontrol-position: top right;
     width: 15px;
     color: white;
     border-left-width: 0px;
     border-left-color: darkgray;
     border-left-style: solid; /* just a single line */
     border-top-right-radius: 3px; /* same radius as the QComboBox */
     border-bottom-right-radius: 3px;
     padding-left: 10px;
 }

QComboBox::down-arrow, QSpinBox::down-arrow, QTimeEdit::down-arrow, QDateEdit::down-arrow
{
     image: url(:/icons/down_arrow.png);
     width: 7px;
     height: 5px;
}

I was trying to override the item delagate:

ui->modeComboBox->setItemDelegate(new QStyledItemDelegate());

along with

QComboBox QAbstractItemView::item:selected style 

Or override the view:

QListView * listView = new QListView(ui->modeComboBox);

listView->setStyleSheet("QListView::item {                              \
                         border-bottom: 5px solid white; margin:3px; }  \
                         QListView::item:selected {                     \
                         border-bottom: 5px solid black; margin:3px;    \
                         color: black;                                  \
                        }");
ui->modeComboBox->setView(listView);

but in both cases this totally disables the highlight of chosen item (which is 17th item)

UPDATE 1

I tested to set ::item:checked stylesheet but it didn't help:

QListView * listView = new QListView(ui->modeComboBox);
listView->setStyleSheet("QListView::item {                              \
                         border-bottom: 5px solid white; margin:3px; }  \
                         QListView::item:selected {                     \
                         border-bottom: 5px solid black; margin:3px;    \
                         color: black; }                                \
                         QListView::item:checked {                      \
                         background-color: green;                       \
                         color: green;}"
                         );
ui->modeComboBox->setView(listView);

Also I added this to stylesheet just to be sure:

QComboBox QListView::item:checked {
 background-color: green;
}

The result with 17 mode checked was (the black is just mouse hover):

enter image description here

UPDATE 2

Ok I was able to change the weight of font of checked item, but I can not remove the tick from the item. I experimented with my stylesheet file and I found out that these two selectors are responsible for style of checked items highlightation:

QWidget:item:selected
{
     border: 0px solid #999900;
     background: transparent;
}
QWidget:item:checked
{
     font-weight: bold;
}

If I remove the ::item:selected then the ::item:checked do not work (it does not make the checked item bold) and the tick disappears.

On Qt forum they advised me to somehow shorten the "space for icons of combobox". I can not find the selector which is responsible for that.

like image 260
nayana Avatar asked Apr 29 '15 09:04

nayana


3 Answers

I know it's really late, but for people having the same problem: I found this at another question here: Not able to hide Choice-Indicator of the QComboBox

This should hide the indicator/tick:

QComboBox::indicator{
    background-color:transparent;
    selection-background-color:transparent;
    color:transparent;
    selection-color:transparent;
}
like image 102
Miklemyers Avatar answered Sep 18 '22 03:09

Miklemyers


Ok after lot of struggle I made some workaround.. its not best, its not proper, but it looks ok..

I added the bold effect in this way (it affect other widgets like checkable menu items, but I can live with that):

QWidget:item:selected
{
     border: 0px solid #999900;
     background: transparent;
}
QWidget:item:checked
{
     font-weight: bold;
}

Then when I am adding items I am prepending spaces into their text in order to shift it to the right.. I was trying so many things, but nothing affected the QAbstractItemView inside.

This is the result:

enter image description here

like image 22
nayana Avatar answered Sep 19 '22 03:09

nayana


I had success with less specific stylesheet selectors and "padding-left":

QComboBox:item {
    padding-left: 20px;  /* move text right to make room for tick mark */
}
QComboBox:item:selected {
    padding-left: 20px;  /* move text right to make room for tick mark */
    border: 2px solid black;
}
QComboBox:item:checked {
    padding-left: 20px;  /* move text right to make room for tick mark */
    font-weight: bold;
}

(probably some unnecessary duplication in that, too!)

like image 25
Rudolf Cardinal Avatar answered Sep 18 '22 03:09

Rudolf Cardinal