Qt: Styling QTabWidget

Question

I'm using Qt and I have a QTabWidget setup in the Qt Designer Editor, you can see it in picture 1.

As you can see after Tab4 there is an empty space all the way to the right edge, in someway I need to fill that space with a color, like in picture 2 (the best thing would be to be able to set a fading color). Or another solution would be that the tabs float out to cover the whole screen.

I use the following stylesheet right now:

QTabWidget::tab-bar {

 }

 QTabBar::tab {
  background: gray;
  color: white;
  padding: 10px;
 }

 QTabBar::tab:selected {
  background: lightgray;
 }

Is there a way to set the background color of the QTabBar using Qt stylesheets? Or can I get the tabs floating out to the edge using Qt stylesheets?

EDIT: I have been trying the solution that Caleb Huitt - cjhuitt suggested below. I really like the idea of making the tabs expand but can't get it working.

In Qt Designer Editor I right click on my QTabWidget->"Promote To ..." and choose "Base class name": QTabWidget "Promoted class name": ExpandableTabWidget and then I click add and then Promote.

In the init method of the widget that holds my QTabWidget I set

ui.tabWidget->SetTabsExpanding(true);

Everything is building fine but the QTabbar doesn't expand.

Am I doing something wrong?

Thanks!

have you tried giving tab-bar a background-color ? what was the result ? — smerlin
Thanks! But thats what I've been playing with so far but no results. Isn't this possible? — Martin
The Q_PROPERTY line will probably only help you if you make the expanding tab widget into a plugin. Otherwise, if it is generating warnings, you could remove it. — Caleb Huitt - cjhuitt
Also, regarding the expanding tab widget, I was assuming that this would work, never having done it myself. If it doesn't work, you could create your own tab widget pretty easily, with a QTabBar above a QFrame, and a QStackedWidget inside that QFrame. You'll need to add some logic to handle the switching, of course. However, I'd poke around a little more to try and find out why the tabs aren't expanding. — Caleb Huitt - cjhuitt

baysmith baysmith · Accepted Answer · 2010-03-25T07:47:37

Both expanding tabs and coloring the background can be accomplished using style sheets.

For expanding tabs, a style sheet can be applied to the tabs which sets their width to a fraction of the total width of the QTabWidget. Since the style sheet will need to be updated upon resize, it is applied using an event filter. See first example code below.

Although the background of the tab bar can be set, the tab bar doesn't fill the entire space above the tab pane. It is the container (or parent widget) which is showing through. To control the coloring of that area, put the QTabWidget in a QWidget and set the style sheet on the container. See second example code below.

Expanding tabs:

#include <QtGui>

// Sets the style sheet of the QTabWidget to expand the tabs.
static void expandingTabsStyleSheet(QTabWidget *tw)
{
    tw->setStyleSheet(QString("QTabBar::tab { width: %1px; } ")
                      .arg(tw->size().width()/tw->count()));
}

// On resize events, reapply the expanding tabs style sheet
class ResizeFilter : public QObject
{
    QTabWidget *target;
public:
    ResizeFilter(QTabWidget *target) : QObject(target), target(target) {}

    bool eventFilter(QObject *object, QEvent *event)
    {
        if (event->type() == QEvent::Resize)
            expandingTabsStyleSheet(target);
        return false;
    }
};


int main(int argc, char * argv[])
{
  QApplication app(argc, argv);

  QTabWidget *tw = new QTabWidget;
  tw->installEventFilter(new ResizeFilter(tw));
  tw->addTab(new QWidget, "Tab1");
  tw->addTab(new QWidget, "Tab2");
  tw->addTab(new QWidget, "Tab3");

  tw->show();

  return app.exec();
}

Background beside tabs:

#include <QtGui>

int main(int argc, char * argv[])
{
  QApplication app(argc, argv);

  QWidget *container = new QWidget;
  container->setStyleSheet("background: qlineargradient( x1: 0, y1: 0, x2: 1, y2
: 0, stop: 0 black, stop: 1 blue);");

  QHBoxLayout *layout = new QHBoxLayout(container);
  layout->setContentsMargins(0, 0, 0, 0);

  QTabWidget *tw = new QTabWidget(container);
  layout->addWidget(tw);
  tw->setStyleSheet(
      "QTabBar::tab { background: gray; color: white; padding: 10px; } "
      "QTabBar::tab:selected { background: lightgray; } "
      "QTabWidget::pane { border: 0; } "
      "QWidget { background: lightgray; } ");
  tw->addTab(new QWidget, "Tab1");
  tw->addTab(new QWidget, "Tab2");
  tw->addTab(new QWidget, "Tab3");

  container->show();

  return app.exec();
}

Qt: Styling QTabWidget

4 Answers