Tab close button position

Question

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

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

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

Autrey

Does setting padding-right for the close button not work? By the way, that's a nice looking tab bar. – Baiss

I tried setting padding-right, but if I set a value of 10px as right padding, it reduces the size of the close button for some reason :( – Autrey

What about increasing margin-right of the tab bar? – Baiss

No luck with that too, since close-button is not a sub control of the tab itself, rather a subcontrol of the tab-bar, is it possible to move the position of close-button at all, I tried a lot of things, with regards to padding,margin, border setting, still I can't see it even moving – Autrey

Answer 1

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 :

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

Romano

You are welcome for the answer, as you saw, English is not my native language so many thanks for the edit. – Atwekk

Answer 2

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;

Toweling

interesting, I'll try and get back – Autrey

nope, it's not working, when I increase the margin further (6px) close button start shrinking instead of moving towards left from right edge of the tab – Autrey

Answer 3

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);
}

Erythritol

Answer 4

You have wrong padding

Top

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

buttom

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

Selfheal

Answer 5

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.

Hereby