Tab close button position
-
21-07-2021 - |
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 ?
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
:
- Subclass your
QTabWidget
to have complete access to the protected features - Create your own
QWidget
orQPushButton
as your close button - Manage the position of your button with the stylesheet property (
margin-right
for example) - 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.
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);
}
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.