QCompleter Style Problems

Siset

Hello,

I am styling a QLineEdit (and its QCompleter). At this moment I have the following ( I was hovering on the second item in the screenshot to ease the visualisation of item's limits):

The problem is that there is something on the corners that I do not know how to edit, because I do not know what it is exactly.

As you can see I have rounded the corners of the objects that I know that are involved but there is something that doesn't round.

My code is as follows:

	QCompleter *completer= new QCompleter(patientModel.get(), this);
	QStyledItemDelegate* d= new QStyledItemDelegate(this);
	completer->popup()->setItemDelegate(d);
	completer->setFilterMode(Qt::MatchContains);
	completer->setCompletionColumn(2);
	completer->setCaseSensitivity(Qt::CaseInsensitive);
	completer->popup()->setObjectName("completerPopup");
	completer->setMaxVisibleItems(5);
	ui->lineEdit->setCompleter(completer);

And the style Qss:


QLineEdit {
    border: 2px solid gray;
    border-radius: 15px;
    padding: 6px;
    selection-background-color: darkgray;
	min-width: 10em;
	font: 20px;

}


QAbstractItemView#completerPopup
{
border: 2px solid rgb(81, 81, 81);
padding: 1px;
 border-radius: 15px;
}

QAbstractItemView#completerPopup::item
{
border: 2px solid rgb(81, 81, 81);
padding-top: 2px;
padding-bottom: 2px;
 border-radius: 15px;
}
QAbstractItemView#completerPopup::item:hover
{
background-color:lightGrey;
}

Any idea of which object should I edit in order to obtain round corners?

Thanks in advanced,

raven-worx

@Siset
looks like the viewport widget gets a background inherited (from another style declaration)?

Siset

Hi @raven-worx ,

Thanks for the answer, I am not sure where could this come from and I definitely do not know how to fix it. How can I change the viewport? (And how had I changed it before?)

The only styling lines that I have are these. But I doubt they are the problem :

-The background in my main widget/window like this:

QPalette pal = palette();
QGradient q(QGradient::GlassWater);
QBrush brush(q);
pal.setBrush(QPalette::Window, brush);
setAutoFillBackground(true);
setPalette(pal);

-The complete qss style:


QLineEdit {
	border: 2px solid gray;
	border-radius: 15px;
	padding: 6px;
	selection-background-color: darkgray;
	min-width: 10em;
	font: 20px;
}


QPushButton{
	border: 2px solid gray;
	border-radius: 15px;
	border-color: grey;
	font: 20px;
	padding: 6px;
}
QPushButton#newSessionButton {
     min-width: 10em;
}
QPushButton#labelButton {
    border: 0px;
}
QPushButton#labelButton:hover:!pressed {
    background-color:transparent
}
QPushButton:pressed {
    background-color: darkGrey;
    border-style: inset;
}
QPushButton:hover:!pressed {
    background-color: ghostwhite;
    border-style: inset;
}

QAbstractItemView#completerPopup
{
	border: 2px solid rgb(81, 81, 81);
	padding: 1px;
	border-radius: 15px;
}

QAbstractItemView#completerPopup::item
{
	padding-top: 2px;
	padding-bottom: 2px;
	border-radius: 15px;
}
QAbstractItemView#completerPopup::item:hover
{
	background-color:lightGrey;
}

QToolTip{
	border: 0px solid rgba(255,255,255,0); 
	qproperty-margin: 0; 
	qproperty-indent: 0; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	margin-right: 0px;
	margin-left: 0px; 
	color: rgba(255,255,255,0); 
	background-color: rgba(255,255,255,0); 
}

Thanks in advanced,

raven-worx

@Siset
what happens if you do this:

QAbstractItemView#completerPopup QWidget#qt_scrollarea_viewport {
   background: rgba(0,0,0,0);
}

Siset

@raven-worx

Hi, thanks for the quick reply!

I have copy pasted the code and it does not seem to change anything.

Any other idea?

Thanks,

raven-worx

@Siset
try:

QAbstractItemView#completerPopup::item {
    // your existing styles from post #1 here
    background: rgba(0,0,0,0);
}

after that i dont have any more ideas.

Siset

Thanks @raven-worx !

I have done the test and it does not work directly but the problem is being reduced.

With the following (relevant) code:

QAbstractItemView#completerPopup
{
	border: 2px solid rgb(81, 81, 81);
	padding: 1px;
	border-radius: 15px;
	background: white;
}

With the "white" background (or any other color) the abstract item does not destroy its own border, which is great. The problem is that it is still white outside its own border.

I have tried other relevant QObjects in the QSS style and I have found the following:

If I do not specify the background color of the QAbstractItemView but I specify the QAbstractScrollArea like this:

QAbstractItemView#completerPopup
{
	border: 2px solid rgb(81, 81, 81);
	padding: 1px;
	border-radius: 15px;
}
QAbstractScrollArea{
background-color:darkGray;
}

I get:

And the same effect happens with the QFrame, I do not know if this is relevant for you, but it was weird for me.

Any idea what could be causing this small areas outside the borders?

Thanks,

raven-worx

@Siset
try

popup()->setAttribute(Qt::WA_TranslucentBackground, true);
// or, or a combination of both
popup()->setAutofillBackground(false);

Siset

@raven-worx, thanks for the help.
Still does not work, but I guess that we are extremely close.

popup()->setAutofillBackground(false);

Does not seem to do anything under any circumstance.

But, this does!

popup()->setAttribute(Qt::WA_TranslucentBackground, true);

With (just as before):

QAbstractItemView#completerPopup
{
	border: 2px solid rgb(81, 81, 81);
	padding: 1px;
	border-radius: 15px;
	outline: 0;
	background:white;
}

Plus the popup()->setAttribute(Qt::WA_TranslucentBackground, true);

I get everything black

But if I remove the background:white: (and keep popup()->setAttribute(Qt::WA_TranslucentBackground, true); )


QAbstractItemView#completerPopup
{
	border: 2px solid rgb(81, 81, 81);
	padding: 1px;
	border-radius: 15px;
	outline: 0;
}

I get:

Which is weird because the border radius seems to dissapear.

What is going on?

Thanks in advanced,