How to expand tabs in QTabWidget

Question

I have a QTabWidget like this one:

But I want to expand the tabs to "fill" the entire widget width, like this:

I tried to use the setExpanding function:

ui->myTabWidget->tabBar()->setExpanding(true);

But it didn't work.

How can I do that?

I am using Qt 5.3.2 and Qt Creator 3.2.1.

Countersignature

Answer 1

As mostefa answered here, I can set a fixed width for the tabs using styleSheet.

I am calculating the width based on the QTabWidget width.

To get the QTabWidget width correctly I need to get it in the showEvent function:

void LogListForm::showEvent(QShowEvent *ev)
{
    /*
     * Divide by 2 because we have 2 tabs.
     * I need to decrease 24 pixels to fill the width correctly.
     */
    int tabWidth = (ui->myTabWidget->width()/2)-24;

    /*
     * Then, I set this tabWidth to the styleSheet.
     * Note: I need to set the previously styleSheet to not lose it
     */
    ui->myTabWidget->setStyleSheet( ui->myTabWidget->styleSheet() +
                                    "QTabBar::tab {"
                                    "width: " + QString::number(tabWidth) + "px; }" );
}

Countersignature

I like this approach. It's very simple; the only issue you're likely to run into is the use of the use of the hard-coded adjustment or 24 pixels for the width. That's likely to change from OS to OS and perhaps by user setup, but I don't know that you can do anything about it. Good find. – Montiel

Answer 2

Just set both expanding and document mode to true.

ui->tabWidget->tabBar()->setDocumentMode(true);
ui->tabWidget->tabBar()->setExpanding(true);

Answer

Answer 3

I found that QTabBar has a setExpanding method, which appears to do exactly what you want, but I tried it (on Windows), and it doesn't work. This is the code:

ui->tabWidget->tabBar()->setExpanding (true);

Then I found the following post:

https://forum.qt.io/topic/47404/qtabbar-will-not-expand-its-tabs

I find the answer provided in the above post to be debatable. He says it's respecting the operating system style whether or not the expanding property is set to true and that it's a feature, not a bug, and that you have to subclass QTabBar to get the desired behavior. If I write code to do a specific thing, I feel like my instructions should override the OS style. If I just wanted the OS style, I would leave that special code out. However much I disagree with the implementation, that appears to be what we're stuck with.

So if it's important to you to have this look, then you'll need to subclass QTabBar, override the tabSizeHint--I suspect that will take some experimentation--and use QTabWidget::setTabBar to replace the default with your own. According to the documentation, you have to do that before adding any tabs, so this mechanism is not workable if you want to create your tab widget in Qt Designer. (Another argument in favor of implementing setExpanding as an override to the OS style rather than the way it's been done.)

Montiel

Answer 4

QTabWidget::tab-bar
{
    min-width: 1000;
}

Valaree

Answer 5

// Qt 5.12.2
// just use TabWidget in place of QTabWidget, nothing else
class TabWidget : public QTabWidget
{
    class TabBar : public QTabBar
    {
        QSize _size;
    public:
        TabBar(QWidget* a_parent) : QTabBar(a_parent)
        {
            setWidth(size().width());
        }
        QSize tabSizeHint(int index) const
        {
            return QSize(_size.width()/(count()?count():1), size().height());
        }
        void setWidth(int a_width)
        {
            _size = QSize(a_width, size().height());
            QTabBar::resize(_size);
        }
    };
    TabBar* _tabBar = new TabBar(this);
public:
    TabWidget(QWidget* a_parent) : QTabWidget(a_parent)
    {
        setTabBar(_tabBar);
    }

    void resizeEvent(QResizeEvent *e) override
    {
        _tabBar->setWidth(size().width());
        QTabWidget::resizeEvent(e);
    }
};

Metrical

Answer 6

Not pretty, but what worked for me was to forced the value setExpending in the minimumSizeHint override.

class A: public QTabWidget
{
    A(QWidget *p = nullptr): QTabWidget(p)
    { 
         setDocumentMode(true);
    }

    virtual QSize minimumSizeHint() const override
    {
         tabBar()->setExpanding(true);
         return QTabWidget::minimumSizeHint();
    }
};

Bootee

Answer 7

Use QTabWidget::documentMode:

ui->myTabWidget->tabBar()->setDocumentMode(true);

Toothache

Answer 8

Suggestion from Mitak worked. Assuming the tabwiget is in the centralwidget of the mainwindow, one can replace a tabwidget created with the designer as follow in the code :

QTabWidget* newTabWidget = new GeneralTabWidget(ui->tabWidget_ToReplace->parentWidget());
ui->centralWidget->layout()->replaceWidget(ui->tabWidget_ToReplace, newTabWidget );
delete ui->tabWidget_ToReplace;
ui->tabWidget_ToReplace= newTabWidget ;

if the tabwidget is situated in another location or in a dialog, one need to replace it in the appropriate layout.

Fourth