Horizontal text in QTabWidget

[ivanicy]

Hello!

I am trying to put the tab text in horizontal. I put the tabs in west orientation but the text appears in vertical like this picture:

Anybody knows how to put this texts horizontal?

Thank you very much!!

[mrjj]

Hi
You can use a QProxyStyle.
http://doc.qt.io/qt-5/qproxystyle.html
First time is a bit WTF so here an example.

class CustomTabStyle : public QProxyStyle {
public:
  QSize sizeFromContents(ContentsType type, const QStyleOption* option,
                         const QSize& size, const QWidget* widget) const {
    QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
    if (type == QStyle::CT_TabBarTab) {
      s.transpose();
    }
    return s;
  }

  void drawControl(ControlElement element, const QStyleOption* option, QPainter* painter, const QWidget* widget) const {
    if (element == CE_TabBarTabLabel) {
      if (const QStyleOptionTab* tab = qstyleoption_cast<const QStyleOptionTab*>(option)) {
        QStyleOptionTab opt(*tab);
        opt.shape = QTabBar::RoundedNorth;
        QProxyStyle::drawControl(element, &opt, painter, widget);
        return;
      }
    }
    QProxyStyle::drawControl(element, option, painter, widget);
  }
};

and set it
ui->tabWidget->tabBar()->setStyle(new CustomTabStyle);

[Amine Djeddi]

@mrjj
hii i'm here again xD
me too i got the same probleme !! but where to put the code that you shared ?

[mrjj]

@Amine-Djeddi
Hi
just put in a .h file and include that where you need to use it
like create new file and call it TabProxy.h
past code to it. You will need to add include for QProxyStyle
and you are ready.

Then where you use it, #include " TabProxy.h"
and set on the one you want
ui->tabWidget->tabBar()->setStyle(new CustomTabStyle);

[Amine Djeddi]

@mrjj

cool it worked well , thank you very muuuch :)))

[mrjj]

@Amine-Djeddi
np. QProxyStyle is very cool once you find the way around it.

[MostafaEzzat]

@mrjj

Hey ,

i want to use this but it ends in this i want to make the tab on the left like in the picture above but it doesn't work properly
yeah but it changed after i added the code

this what i got

[MostafaEzzat]

@mrjj

i need exactly like this but the name of the tab vertically instead,Thanks in advance

[mrjj]

Hi
You have to set

then it works for a plain TabWidget

[MostafaEzzat]

@mrjj

Thanks alot

[mrjj]

@MostafaEzzat
Np, that info was actually missing in the org example.

[MostafaEzzat]

@mrjj

I'm sorry for opening this again but i've bunch of css code and want to use but when i add it from StyleSheet of Qt Designer The tabs became Vertical

QTabWidget::pane { border: 1px solid lightgray; top:-1px; background: rgb(245, 245, 245);; }
 QTabBar::tab { background: rgb(230, 230, 230); border: 1px solid lightgray; padding: 15px; } 
QTabBar::tab:selected { background: rgb(245, 245, 245); margin-bottom: -1px; }

[sandrayin]

@mrjj

Hi,

i've managed to implement this but the close button does not align with the new style. What do I do?

[jsulm]

@sandrayin said in Horizontal text in QTabWidget:

What do I do?

We don't know because you do not show any code...