Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tab close button position

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 ?

like image 375
warunanc Avatar asked Oct 30 '12 10:10

warunanc


1 Answers

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.

like image 78
Kévin Renella Avatar answered Oct 24 '22 10:10

Kévin Renella