QListView stylesheet problem

[JPNaude]

Hi

I'm trying to use a stylesheet on QListView and almost got it working except for a couple of things which I can't get to work.

Here is the style sheet that works:

QString stylesheet = "";
// Hover effect:
stylesheet += "QListView::item:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1) }";
// Selected item gradient:
stylesheet += "QListView::item:selected:active { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9); }";
// The padding  of items in the list:
stylesheet += "QListView::item { padding: 5px 1px 5px 1px;}";
d->verticalModeList->setStyleSheet(stylesheet);

QString stylesheet = "";
// Hover effect:
stylesheet += "QListView::item:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1) }";
// Selected item gradient:
stylesheet += "QListView::item:selected:active { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9); }";
// The padding  of items in the list:
stylesheet += "QListView::item { padding: 5px 1px 5px 1px;}";
d->verticalModeList->setStyleSheet(stylesheet);

To copy to clipboard, switch view to plain text mode 

The two things I don't get:
1) Setting the background of the view does not work. When I add the following the background changes but all the other effects (hover etc.) breaks and does not work anymore. I set the background like this:

stylesheet += "background-color: #EEEEEE;";

stylesheet += "background-color: #EEEEEE;";

To copy to clipboard, switch view to plain text mode 

2) I want to get rid of the border around the text of the selected item in the list view. I've attempted to find this border by making it yellow and once I find it I will remove it, however the following creates a yellow border around the whole item.

// The text underneath the selected item:
stylesheet += "QListView::item::text { border-style: dot-dash;  border-width: 5px 1px 5px 1px; border-color: yellow; }";

// The text underneath the selected item:
stylesheet += "QListView::item::text { border-style: dot-dash;  border-width: 5px 1px 5px 1px; border-color: yellow; }";

To copy to clipboard, switch view to plain text mode 

Sorry for not posting pictures but don't have a place to host them.
Cheers,
Jaco

---

Added after 1 3 minutes:

Just to clarify, d->verticalModeList is a QListWidget in my previous post.

[high_flyer]

stylesheet += "background-color: #EEEEEE;";

stylesheet += "background-color: #EEEEEE;";

To copy to clipboard, switch view to plain text mode 

This will just append this string to the styleSheet string, and its not what you want.
You want to change the stylesheet you have, if I understand correctly.
For that you need to parametrize your string with substrings, change the substring, update the main stylesheet string, and set it again.

[JPNaude]

Hmmm maybe my post was a bit confusing. I want to combine the hover effect with a custom background color.

Thus I set the style sheet on the QListView as follows:

QString stylesheet = "";
// I want a colored background:
stylesheet += "background-color: #EEEEEE;";
// Hover effect:
stylesheet += "QListView::item:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1) }";
// Selected item gradient:
stylesheet += "QListView::item:selected:active { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9); }";
// The padding of items in the list:
stylesheet += "QListView::item { padding: 5px 1px 5px 1px;}";
// The text underneath the selected item:
stylesheet += "QListView::item::text { border-style: dot-dash;  border-width: 5px 1px 5px 1px; border-color: yellow; }";
d->verticalModeList->setStyleSheet(stylesheet);

QString stylesheet = "";
// I want a colored background:
stylesheet += "background-color: #EEEEEE;";
// Hover effect:
stylesheet += "QListView::item:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1) }";
// Selected item gradient:
stylesheet += "QListView::item:selected:active { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9); }";
// The padding of items in the list:
stylesheet += "QListView::item { padding: 5px 1px 5px 1px;}";
// The text underneath the selected item:
stylesheet += "QListView::item::text { border-style: dot-dash;  border-width: 5px 1px 5px 1px; border-color: yellow; }";
d->verticalModeList->setStyleSheet(stylesheet);

To copy to clipboard, switch view to plain text mode 

The thing is, when I remove the background color part, the hovering etc. works. However when I combine it with the other effects, none of the other effects (like hovering etc.) work.

Thanks for your time,
Cheers
Jaco

[high_flyer]

No, you post was clear.
But my probably was not.
Here is a bit of pseudo code to explain what I meant:

QSring MyClass::changeHoverBackground(const QString &strBackground)
{
  return QString( "QListView::item:hover { " +strBackground + " }");
}
....
 
QString strBackground1 = "background-color: #EEEEEE;";
QString strBackground2 = "background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1) "
QString strBackground = strBackground1;
 
QString strHover = changeHoverBackgrounf(strBackground2);
 
 
d->verticalModeList->setStyleSheet(strHover);

QSring MyClass::changeHoverBackground(const QString &strBackground)
{
  return QString( "QListView::item:hover { " +strBackground + " }");
}
....

QString strBackground1 = "background-color: #EEEEEE;";
QString strBackground2 = "background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1) "
QString strBackground = strBackground1;

QString strHover = changeHoverBackgrounf(strBackground2);


d->verticalModeList->setStyleSheet(strHover);

To copy to clipboard, switch view to plain text mode 

[JPNaude]

Hi high_flyer

Thank you again for your response. I think I am clearly missing something since I still don't understand what you mean. If I understand the pseudo code that you posted correctly it will create different backgrounds for the hover effect?

I want the QListWidget to have a custom background color, along with a hover effect. As I mentioned before, I can change only the background color and it works but if I try to combine this with hover effects, the hover effects does not work.

I've tried a couple of other things also without success. First I tried to set the palette, this does not work.

d->verticalModeList->setPalette(QPalette(QColor(100, 150, 200)));
d->verticalModeList->setAutoFillBackground(true);

d->verticalModeList->setPalette(QPalette(QColor(100, 150, 200)));
d->verticalModeList->setAutoFillBackground(true);

To copy to clipboard, switch view to plain text mode 

I also tried to reimplement the paint function of the QListWidget as follows, this also does not work. I know that the code is incomplete, but I just want to test if the background is actually painted in a different color.

void MyListWidgetSubclass::paintEvent(QPaintEvent *event)
{
    setPalette(QPalette(QColor(100, 150, 200)));
    setAutoFillBackground(true);
    QListWidget::paintEvent(event);
}

void MyListWidgetSubclass::paintEvent(QPaintEvent *event)
{
    setPalette(QPalette(QColor(100, 150, 200)));
    setAutoFillBackground(true);
    QListWidget::paintEvent(event);
}

To copy to clipboard, switch view to plain text mode 

I find it really amazing that it is this difficult so achieve something simple like this.

---

Added after 46 minutes:

Well I'm not sure if its the best way to solve it, but I managed to change the background color of the QListWidget by painting a rectangle over it before painting the items.

Here is the paintEvent() override that I used:

void MyListWidgetSubclass::paintEvent(QPaintEvent *event)
{
    QPainter painter(this->viewport());
    painter.setPen(QPen(Qt::blue));
    painter.setBrush(QBrush(mBackground, Qt::SolidPattern));
    painter.drawRect(-1,-1,sizeHint().width()+1,sizeHint().height()+1);
    QListView::paintEvent(event);
}

void MyListWidgetSubclass::paintEvent(QPaintEvent *event)
{
    QPainter painter(this->viewport());
    painter.setPen(QPen(Qt::blue));
    painter.setBrush(QBrush(mBackground, Qt::SolidPattern));
    painter.drawRect(-1,-1,sizeHint().width()+1,sizeHint().height()+1);
    QListView::paintEvent(event);
}

To copy to clipboard, switch view to plain text mode 

[high_flyer]

Your style sheet in the original post was ok, but you made it break with the line:

stylesheet += "background-color: #EEEEEE;";

stylesheet += "background-color: #EEEEEE;";

To copy to clipboard, switch view to plain text mode 

chang it to

stylesheet += "QListView {
     background-color: #EEEEEE;
 }";

stylesheet += "QListView {
     background-color: #EEEEEE;
 }";

To copy to clipboard, switch view to plain text mode 

and to be on the safe side have it to be the first string in the style sheet.

[JPNaude]

Well thank you very much it does actually solve it! I guess I didn't completely get the syntax of the stylesheets.

Thanks again for the help.

---

Added after 9 minutes:

Well the last things that I mentioned in my original post is that I cannot get rid of the rectangle around the text of a selected item. Below is an image of the rectangle that I'm talking about:



Any ideas to get rid of it? I tried a few things but it does not remove the rectangle:

// Try 1
stylesheet += "QListView::item::text { border-style: none; }";
 
// Try 2
stylesheet += "QListView::item:selected:active::text { border-style: none; }";

// Try 1
stylesheet += "QListView::item::text { border-style: none; }";

// Try 2
stylesheet += "QListView::item:selected:active::text { border-style: none; }";

To copy to clipboard, switch view to plain text mode 

I'm sure this must be possible but I don't have a clue how to do it.

[high_flyer]

Your item does not have a border!
Only the Label IN the item.
Your item is not only the label, but an object that has a label.
You can test it by applying a rule for no border for QLabel.
If the border goes away, then just change to rule to apply for QLabel which are children of your QListView.

[JPNaude]

I've tried to get hold of the QLabel but I'm not convinced that the text is a QLabel. I set a style on QLabel for my whole application to make all labels red and they all go red, but not the text.

The solution to get rid of it for me is:

myListWidget->setFocusPolicy(Qt::NoFocus);

myListWidget->setFocusPolicy(Qt::NoFocus);

To copy to clipboard, switch view to plain text mode 

Thanks again for the help.

[high_flyer]

Well in that case use focus as a state filter for your style sheet:

stylesheet += "QListView::item::focus{ border-style: none; }";

stylesheet += "QListView::item::focus{ border-style: none; }";

To copy to clipboard, switch view to plain text mode 

This way you have everything as style sheet and not part in style sheet and part in code.

Style sheets are tricky, you have to experiment to get it right!