Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QCompleter Style Problems



  • 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):

    problemScreenshot.png
    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,


  • Moderators

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



  • 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,


  • Moderators

    @Siset
    what happens if you do this:

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


  • @raven-worx

    Hi, thanks for the quick reply!

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

    problemScreenshot.png

    Any other idea?

    Thanks,


  • Moderators

    @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.



  • Thanks @raven-worx !

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

    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:

    problemScreensScrool.png

    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,


  • Moderators

    @Siset
    try

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


  • @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
    problemScreens.png

    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:
    problemScreenshot.png

    Which is weird because the border radius seems to dissapear.

    What is going on?

    Thanks in advanced,


Log in to reply