Question

I want to style my tabs in my Qt app as follows:

enter image description here

I used following style sheet:

QTabBar{background-color: #fff; border-top: 0px;}
QTabBar::tab {
    border-image: url(:/New_UI/tab_inactive.png) 7 17 7 2;
    margin-left: 2px;
    border-right: 17px;
    border-top: 5px;
    border-bottom: 5px;
    font: 400 9.2pt "Segoe UI";
    color: #ccc;
    padding: 0px 13px 0px 5px;
    max-height: 26px;
 }

QTabBar::tab:selected, QTabBar::tab:hover {
    border-image: url(:/New_UI/tab_active.png) 6 17 6 2;
}

QTabBar::close-button {
    image: url(:/New_UI/tab_close.png);
    subcontrol-origin: padding;
    subcontrol-position: right; 
    width: 13px;
    height: 13px;

}

The result is as follows (close button position is not as I wanted):

enter image description here

What am I doing wrong & how could I get my desired result ?

Was it helpful?

Solution

EDIT : I know this post is old, but I hope it could help someone else.

After a couple of tests, I think there is one way to do this, but it does not use Qt style sheets :

  1. Subclass your QTabWidget to have complete access to the protected features
  2. Create your own QWidget or QPushButton as your close button
  3. Manage the position of your button with the stylesheet property (margin-right for example)
  4. Add your button to the tab tabBar()->setTabButton(index, QTabBar::RightSide, closeButton);

The code I used for the test :

MyTab::MyTab(QWidget *parent) : QTabWidget(parent)
{
/// Create your button
QPushButton *close = new QPushButton(this);

// Add a tab
addTab(new QWidget(), QIcon(), "Tab 1");
setStyleSheet("QTabBar::tab { width : 150px;}");

// Size and move your button
close->setStyleSheet("max-height: 14px; max-width: 15px; margin-right: 50px;");

// Add your button to the tab
tabBar()->setTabButton(0, QTabBar::RightSide, close);
}

Finally, in the MainWindow, I added my own TabWidget to a layout :

ui->layout->addWidget(new MyTab(this));

The result :

enter image description here

But now you will have to handle the close action manually by connecting the button and get the index for a removeTab(index) call.

OTHER TIPS

I am doing the same thing as you do, here is my stylesheet:

QTabBar::close-button{
    image:url(:tabclose.png); 
    margin-right:4px;
}

Do not use "width" and "height" property, those two doesn't work here, setting a "image:url()" on sub controls implicitly sets the width and height of the sub-control (unless the image in a SVG).

Use "margin-right" property to control the distance from the right edge of the tab;

Add a custom button is a good answer.but if you use margin to decide close-button's position,the close-button's mouse area will be abnormal,so I add a SpacerItem and button in a widget,finally add this widget to TabWidget.

void TabBarCloseable::tabInserted(int index)
{
    QWidget *widget = new QWidget(this);
    QHBoxLayout *layout = new QHBoxLayout(this);
    widget->setLayout(layout);

    QToolButton *closeBtn = new QToolButton(this);
    layout->addWidget(closeBtn);
    layout->insertSpacing(1, 15);
    closeBtn->setStyleSheet("max-height: 16px; max-width: 16px;");

    this->setTabButton(index, QTabBar::RightSide, widget);

    QTabBar::tabInserted(index);
}

You have wrong padding

enter image description here

Top

QTabBar::tab {
    min-width: 25ex;
    padding: 10px 50px 10px 10px;
}

buttom

QTabBar::tab {
    min-width: 25ex;
    padding: 10px 0px 10px 10px;
}

This is a pure stylesheet solution, without creating the buttons manually:

QTabBar::close-button {
    image: url(:/tab-close.png);
    padding-left: -13px;
}

If you check the Qt source, the image painting code uses only the padding values, not the margin values.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top