qttabswidgeticonstabwidget

QTabWidget - tab icons not in the center

I have a QTabWidget with six tabs, and all the tabs have an icon - but the icons are not in the center of the tab:

TabIcons

What I've done so far :

tabWidget->setStyleSheet("QTabBar::tab {width: 40px; height: 40px;}"
                        "QTabBar::tab:selected {background: lightblue;}");
tabWidget->setIconSize(QSize(40, 40));
tabWidget->addTab("widget", QIcon("iconPath"), ""); //<--for all six tabs

And:

tabWidget->setTabIcon(index, QIcon("iconPath"));

Any ideas why this is happening, and how I can fix it?

Solution

  • I too have been struggling with this issue. Here is how I resolve it.

    Background:

    I was attempting to get a left side tab menu going, which used icons as its indicators (what the users would see), however I had a problem:

    enter image description here

    My icons, which were set using the currentTabIcon in the Property Editor, were aligning to the bottom (which is expected since I am using the West orientation. Normally, the North orientation would be selected and the icons would be on the left).

    I had this as my stylesheet:

    QTabBar::tab:hover {
    background-color: #212121;
}

QTabBar::tab:selected{
    background-color: #313131;
}
QTabBar::tab {
    background-color: #111111;	
    height:70px;
    width: 70px;
    border: none;
}

    Now, attempting the suggested solution found in this post whereby I set the margins did not have the desired effect, infact it had no effect at all.

    Solution:

    After playing around with some of the CSS properties, I discovered that setting the padding-top and padding-bottom gave me the desired result.

    enter image description here

    adding the lines:

    padding-top: -15px;
padding-bottom: 15px

    Resolved the problem for me, however this needs to be changed according to your needs.

    My final stylesheet resembles:

    QTabBar::tab:hover {
    background-color: #212121;
}

QTabBar::tab:selected{
    background-color: #313131;
}
QTabBar::tab {
    background-color: #111111;	
    height:70px;
    width: 70px;
    border: none;
    margin: 0px;
    padding-top: -15px;
    padding-bottom: 15px
}