QTabWidget with no text and icon

I'm using a QTabWidget where I only want to use icons on the tabs and no text. I'm using some stylesheet to style my tabs. The problem is that the icon doesn't show up centered, instead it's to the left in the tab. I can't figure out how to make it show up centered. In the Designer Editor the icon is centered but not in the real app as you can see in the picture.

You can see both my stylesheet and a picture of the tabs below.

Tabs:
http://i45.tinypic.com/11br8jm.jpg

Stylesheet:

Code:

---

QTabWidget::pane {
         border-top: 0px;
     }
 
     QTabBar::tab {
         border: 1px solid #333;
         border-radius: 8px;
	     color: #333;
		padding: 5px 5px 5px 5px;
		margin: 0px 2px 0px 2px;
		background: #fff;
     }
 
     QTabBar::tab:selected {
         border-color: #000;
		background: #f1f1f1;
     }

---

Are you setting the icons on tab using style sheets or code? I assume code as i don't see any code to set icons in the style sheet you posted. Also, i don't see any option to set the tab bar icon using style sheet in Qt documentation, so i am curious.
I am tinkering around with the same thing but i don't see any option to change the icon position unless you subclass QTabBar and do the drawing yourself.
Maybe try playing with the "align" stylesheet property.

Hi and thanks for your help!

Yes I'm setting the icon with code. The strange thing is that if I delete ALL the stylesheets for the tabs then the icon shows up perfect in center but then I can't get the style of the tabs that I like. I have been trying to play with align and text-align to get it right. This is what I use now and it is still not working:

Code:

---

QTabBar::tab {
		align: center;
		text-align: center;
		background: #fff;
		border: 1px solid #333;
}

---

But if I delete the background and border properties it works perfect, really strange... Any ideas?

the background color shouldn't have any effect on it, neither border should have any effect. The problem is that i can't see any style sheet property in Qt documentation for specifying an icon for tabs and aligning them. So, the only solution i can think of is custom drawing so you can specify the position (alignment) of the icon yourself.

And as you said when you don't specify a style sheet or don't use background and border properties it shows up fine. So, i guess this is just a Qt bug (default behavior?). One more point: don't use the "align" property in your style sheet, i get this error when i use the align property:

"Unknown property align"

Hi and thank you!

Is it hard to do the custom drawing of the tabbars if they are a part of a QTabWidget? Im quite a newbie to Qt and I haven't done anything like this before. Is there maybe any examples to look at?

I'll try to post some sample code tomorrow for this :)

Thats really nice of you, thanks!

I am just trying to help :)
Ok, here's the code:

First you need to make a custom QTabBar class. A sample code is as follows:

Header file (.h):

Code:

---

#include <QTabBar>
#include <QIcon>
#include <QPainter>
 
class StatusTabBar : public QTabBar
{
    Q_OBJECT
    public:
        StatusTabBar ();
        virtual ~StatusTabBar () {}
 
    protected:
       QSize tabSizeHint (int) const {  return QSize(70,27);}
       void paintEvent(QPaintEvent *);
};

---

So, you need to create a custom tab bar class by deriving from QTabBar and then overwriting the tabSizeHint (use this to specify the size of the tabs) and paintEvent (use this for custom drawing). Here's the code from .cpp file:

Code:

---

#include <QTabBar>
#include <QBitmap>
#include <QIcon>
#include <QStylePainter>
#include <QStyleOptionTabV2>
 
#include "statustabbar.h"
 
StatusTabBar::StatusTabBar(): QTabBar()
{
}
 
void StatusTabBar::paintEvent(QPaintEvent *event)
{    
    QStylePainter painter(this);
 
    for(int i = 0; i < 3; ++i)
    {
        QStyleOptionTabV2 option;
        initStyleOption(&option, i);
        //printf("tab text: %s\n", option.text.toLatin1().data());
        //painter.drawControl(QStyle::CE_TabBarTab, option);
        painter.drawItemPixmap(option.rect, 0, QPixmap("selected.png"));
        painter.drawItemText(option.rect, 0, palette(), 1, option.text);
    }
}

---

Here, i have 3 tabs in my application, so i hard-coded the loop to run 3 times, but i it's possible to get this value from Qt. You should read more about QStylePainter and QStyleOptionTabV2 class in the Qt documentation. QStylePainter::drawItemPixmap can be used for adding a pixmap to the tabs. option.rect contains the rectangle for the entire tab, so if you want to draw the icon at a particular location, you can specify the appropriate rect. QStylePainter::drawControl can be used for drawing various parts of the tab. You can read more about it the Qt documentation.

Also, if you want to see more drawing code and how Qt draws the default tab bar, check out the paintEvent function in qtabbar.cpp in the Qt source code (qt-source/src/gui/widgets/qtabbar.cpp)

Edit: If you use custom drawing you may not be able to use style sheets. I am not sure it'll work but you can try.

I hope this helps.

@Martinn, do share with us if you were able to achieve what you intended (even if it takes some time to do it)

Hi again!

I cheated a little as I didn't have the time and added some padding to the left that made the icon show up in the middle. :-)

Hi Montylee,

Thank you for help.
I shall try, and post up my result.

Best regards.

Hi Montylee,
I have done as you said. It is ok.
Thank you so much.

Tank you montylee - you don't know - but you helped me sooooooooo much with the suggestion of overriding tabSizeHint!!!