Tab close button position

Question

I want to create my tabs in my Qt application as follows:

I used the following stylesheet:

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 (closing the button position is not the way I wanted):

What am I doing wrong and how can I get the desired result?

Answer 1

EDIT: I know this post is outdated, but I hope this can help someone else.

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

• The QTabWidget subclass must have full access to protected functions.
• Create your own QWidget or QPushButton as a close button.
• Controlling the position of your button using the stylesheet property (e.g. margin-right )
• 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 MainWindow, I added my own TabWidget to the layout:

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

Result:

But now you have to handle the closing action manually by connecting the button and getting the index to call removeTab(index) .

Answer 2

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

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

Do not use the width and height properties, these two do not work here, setting "image: url ()" on auxiliary controls implicitly sets the width and height of the subcontrol (if only the image is in SVG).

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

Answer 3

This is a clean style solution without manually creating buttons:

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

If you check the source of Qt, the image drawing code uses only padding values, not field values.

Answer 4

Adding a custom button is a good answer. But if you use margin to determine the position of the close button, the shutter mouse area will be abnormal, so I add the SpacerItem and button to the widget, finally add this widget to the 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); }