Issue with QTabWidget - QtDesigner

amkp

Hi, my tabs have a white space above and on the edges, how can I make it the same color as the background?

Captura de pantalla 2023-12-12 173035.png

My code in the style sheet is:

QTabWidget::pane {
	border: 3px solid rgb(68, 76, 94);
}

/*======TAB*========*/

QTabBar::tab {
	/*color: rgb(68, 76, 94);*/
	border: 2px solid rgb(68, 76, 94);
}

QTabWidget::tab-bar:top {
    top: 3px;
}

QTabWidget::tab-bar:bottom {
    bottom: 2px;
}

QTabWidget::tab-bar:left {
    right: 2px;
}

QTabWidget::tab-bar:right {
    left: 2px;
}

QTabBar::tab:left:last, QTabBar::tab:right:last,
QTabBar::tab:left:only-one, QTabBar::tab:right:only-one {
    margin-bottom: 0px;
}

QTabBar::tab:first {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

QTabBar::tab:last {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

QTabBar::tab:middle {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

QTabBar::tab:top, QTabBar::tab:bottom {
    min-width: 8ex;
    margin-right: -1px;
    padding: 5px 10px 5px 10px;
}

QTabBar::tab:top:last, QTabBar::tab:bottom:last,
QTabBar::tab:top:only-one, QTabBar::tab:bottom:only-one {
    margin-right: 0;
}

QTabBar::tab:left, QTabBar::tab:right {
    min-height: 8ex;
    margin-bottom: -1px;
    padding: 10px 5px 10px 5px;
}


/*TAB:SELECTED*/

QTabBar::tab:selected {
    
	background: white;
	
	color: rgb(68, 76, 94);
	border-color: rgb(68, 76, 94);
	border-bottom-color: transparent;
	margin-top: 0; 
}

QTabBar::tab:top:selected {
    border-bottom-color: none;
}

QTabBar::tab:bottom:selected {
    border-top-color: none;
}

QTabBar::tab:left:selected {
    border-left-color: none;
}

QTabBar::tab:right:selected {
    border-right-color: none;
}



/*TAB !SELECTED*/

QTabBar::tab:!selected {
	color: white;
	background-color: rgb(68, 76, 94);
	border-color: rgb(68, 76, 94);
	border-width: 3px;
}

QTabBar::tab:top:!selected {
    margin-top: 4px;
	margin-color: rgb(68, 76, 94);
}

QTabBar::tab:bottom:!selected {
    margin-bottom: 3px;
}

QTabBar::tab:left:!selected {
    margin-right: 3px;
}

QTabBar::tab:right:!selected {
    margin-left: 3px;
}

Also, how can I remove the gray bottom border on the selected tab?
Thanks.

Abderrahmene_Rayene

Hi,

Please provide the following information:

Qt kit you are using.
Qt Creator version.
OS, and if Linux, what desktop environment?

I tested that stylesheet on Fedora KDE spin, using Qt 5.15.2/6.2.4/6.6.1, Qt Creator 12, and this MRE:

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QTabWidget t;

    t.setStyleSheet(R"(QTabWidget::pane {
    border: 3px solid rgb(68, 76, 94);
}

/*======TAB*========*/

QTabBar::tab {
    /*color: rgb(68, 76, 94);*/
    border: 2px solid rgb(68, 76, 94);
}

QTabWidget::tab-bar:top {
    top: 3px;
}

QTabWidget::tab-bar:bottom {
    bottom: 2px;
}

QTabWidget::tab-bar:left {
    right: 2px;
}

QTabWidget::tab-bar:right {
    left: 2px;
}

QTabBar::tab:left:last, QTabBar::tab:right:last,
QTabBar::tab:left:only-one, QTabBar::tab:right:only-one {
    margin-bottom: 0px;
}

QTabBar::tab:first {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

QTabBar::tab:last {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

QTabBar::tab:middle {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

QTabBar::tab:top, QTabBar::tab:bottom {
    min-width: 8ex;
    margin-right: -1px;
    padding: 5px 10px 5px 10px;
}

QTabBar::tab:top:last, QTabBar::tab:bottom:last,
QTabBar::tab:top:only-one, QTabBar::tab:bottom:only-one {
    margin-right: 0;
}

QTabBar::tab:left, QTabBar::tab:right {
    min-height: 8ex;
    margin-bottom: -1px;
    padding: 10px 5px 10px 5px;
}

/*TAB:SELECTED*/

QTabBar::tab:selected {

    background: white;

    color: rgb(68, 76, 94);
    border-color: rgb(68, 76, 94);
    border-bottom-color: transparent;
    margin-top: 0;
}

QTabBar::tab:top:selected {
    border-bottom-color: none;
}

QTabBar::tab:bottom:selected {
    border-top-color: none;
}

QTabBar::tab:left:selected {
    border-left-color: none;
}

QTabBar::tab:right:selected {
    border-right-color: none;
}

/*TAB !SELECTED*/

QTabBar::tab:!selected {
    color: white;
    background-color: rgb(68, 76, 94);
    border-color: rgb(68, 76, 94);
    border-width: 3px;
}

QTabBar::tab:top:!selected {
    margin-top: 4px;
}

QTabBar::tab:bottom:!selected {
    margin-bottom: 3px;
}

QTabBar::tab:left:!selected {
    margin-right: 3px;
}

QTabBar::tab:right:!selected {
    margin-left: 3px;
})");

    t.addTab(new QWidget, "Variable fisicas");
    t.addTab(new QWidget, "Variable fisiologicas");
    t.addTab(new QWidget, "Unidad de Control de Agua");
    t.show();

    return a.exec();
}

and I get this:

Which looks normal.

I also tried it on in Qt Designer, just slapped a QTabWidget on a QMainWindow and applied the stylesheet on it, and got this:

I also tried to apply the stylesheet on the main window, and the QApplication just to be sure, but same result.