Strange border with QListWidget

Tyskie

Hello,
I made a Fingertab widget for my app using a QListWidget and QListWidgetItem but some kind of border still appear even if the borders are set to 0px or none using setStyleSheet method. Also tried to set Margins to 0 - didn't help.

Do you know where this border come from and how I can remove it (it's the gray-ish thing on the screenshot)?

Here is a how I construct it, nothing fancy. It is written in PyQT5, but I suppose it is very similar to C++ implementation:

tabwidget = QListWidget(self)  # self is the QMainWindow set as parent
tabwidget.setMaximumWidth(100)
tabwidget.setStyleSheet('QListWidget { background: lightblue; border: none;}')
tabwidget.setContentsMargins(0, 0, 0, 0)
tabwidget.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
tabwidget.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
for item_name in ['Timers', 'Auctions', 'Price Trends', 'Settings']:
    # adds the items and set the widgets etc... [...]

Many thanks in advance for your consideration.

mrjj

@Tyskie said in Strange border with QListWidget:

QListWidget { background: lightblue; border: none;}

Hi and welcome to the forums.
Can it be from other stylesheet where you use QWidget as selector. ( they are cascading)
if you apply the stylesheet to plain ListWidget
alt text

So my best guess is that is affected by something in parent stylesheet.

Tyskie

Thank you for your answer.
I have indeed a parent container nothing more than a QWidget with a QHBoxLayout as:

main_layout = QHBoxLayout()
main_layout.setContentsMargins(0,0,0,0)
main_layout.addWidget(tabwidget) # the one that as the weird border
main_layout.addWidget(tabwidget_stack) # this is the part on the right of the QHBoxLayout
main_widget = QWidget()
# main_widget.setStyleSheet('''
#     QWidget {
#         border: 10px; <---- This doesnt change anything :(
#     }
# ''')
main_widget.setContentsMargins(0,0,0,0)
main_widget.setLayout(main_layout)

mrjj

Hi
Stylesheets are cascading meaning stylesheet on parent will affect children so
QWidget {} will also affect QListWidget as its also an QWidget.
Try to target ONLY the ones you want to have frame
Like ( with name)
QWidget#nameofit {
border: 10px; <---- This doesnt change anything :(
}

If not that spot, it might be somewhere else.
Please see
http://doc.qt.io/qt-5/stylesheet-syntax.html
and Selector Types

Diracsbracket

@Tyskie said in Strange border with QListWidget:

Do you know where this border come from and how I can remove i

It could be from the QFrame that seems to be around the QListWidget?
In Qt Designer, you can set the frameShape property of the QFrame section to NoFrame

0_1525519691660_f51110e9-6c35-48bb-9557-f6e664db0156-image.png

or use:

ui->listWidget->setFrameStyle(QFrame::NoFrame);

In your case, would this work?:

tabwidget.setFrameStyle(QFrame.NoFrame)

(I don't know the correct PyQt syntax)

Tyskie

Thanks @mrjj , I tried to set the style on all parent item till QObject :D nothing helped it looks like it is outside the QListWidget, I will try to dig deeper. thanks for the hint.

@Diracsbracket Thanks as well, I tried to set the Shape and Style, nothing help unfortunately :(

mrjj

@Tyskie
Thats the main reason , its recommended to use 1 stylesheet on
QApplication or mainwindow and not multiple on various widgets.
Its hard(er) to handle.

Im pretty sure it just comes from a broad selector somewhere in parent tree.

Diracsbracket

@Tyskie
As @mrjj said in Strange border with QListWidget:

Thats the main reason , its recommended to use 1 stylesheet on
QApplication or mainwindow and not multiple on various widgets.
Its hard(er) to handle.

In addition, to debug your specific problem, try to comment all the setStyleSheet() commands you use in your code and check if the frame is still there.
Then, if it is still there, try tabwidget.setFrameStyle()...

Tyskie

@Diracsbracket I did that already, I even set custom frame style and border to that Frame, it appears inside this gray border box. This is really weird, even setting a * on the MainWindow style sheet with a border: 1px solid red doesnt color that border. I cannot find where it is coming from :D

Tyskie

It seems to happen only on mac-osx apparently. On Windows I do not have this border ;(

mrjj

@Tyskie
oh ?
time to test a clean project then.
To see if it just gets border if it sees a stylesheet. ( on macOs)

Diracsbracket

@Tyskie said in Strange border with QListWidget:

On Windows I do not have this border ;(

That's why I suggested the setFrameStyle. I had a similar problem when running my first app on MacOS. The frame was not visible in Windows, because it happened to have the same color as the window. It showed on MacOS X, and it took me a while to remember that I had put my layout in a parent QFrame (I couldn't at first understand why there was a border at all because layouts don't have a border or frame property). Too bad it is not helping in your case :-(.

Diracsbracket

@Tyskie I think I may have found it...
As suggested by @mrjj, I tried a clean example on my MacOS X VM...

The thick border seems to be a focus border...

If you set the focusPolicy property of the QListWidget to NoFocus, the border disappears.

Alternatively, and better:
https://stackoverflow.com/questions/13327818/how-to-prevent-the-default-blue-border-being-drawn-on-qlineedit-focus

ui->listWidget->setAttribute(Qt::WA_MacShowFocusRect, 0)

mrjj

Nice find @Diracsbracket
So its just MacOs focus Rect we see ?

Diracsbracket

@mrjj said in Strange border with QListWidget:

So its just MacOs focus Rect we see

Yes, it seems that way. However, I was suprised to see that when I clicked on a button, the focus rectangle did not disappear; this was because the button only had tab focus. When I changed the focus policy of the button to strong, the focus rectangle disappears from the QListWidget when I clicked the button; If this would have happened directly, it would have been clear from the start that this was a focus rectangle :0

Tyskie

@Diracsbracket said in Strange border with QListWidget:

The thick border seems to be a focus border...

Wow. Thanks ! indeed it did the trick, I would never have find that. Thanks a ton !