QTabWidget increase tab scroller arrow button width

Question

I have a QTabWidget with too many tabs

and they overflow with scroller arrows. I want to increase the width of the scroller arrows by more than twice of the default width so they are easier to use on a touchscreen.

There is a QTabWidget StyleSheet example but I cannot seem to get it to work nicely. The stylesheet below produces this screenshot

QTabBar::scroller { /* the width of the scroll buttons */
    width: 40px;
}

QTabBar QToolButton { /* the scroll buttons are tool buttons */
    width: 15px;
    border-width: 2px;
}

where I would like something like this screenshot I edited.

Answer 1

Method #1: This appears to be a bug, plain and simple. The background of the buttons is transparent; but setting it to white via a style sheet and setting the widths aren't working right either.

I was able to solve the problem by using a style sheet thus:

QTabBar::scroller {width: 0px;}

If it don't work: get rid of it. Then, I created two buttons with which to scroll it right, and laid the tab widget and buttons out horizontally. I set the padding of enclosing vertical and horizontal layouts to zero. I labelled the buttons "<" and ">", but u can git fancier if u want. If you want to have the tab area below the scroll bar the same width as the tab bar and the buttons, you need two tab widgets:

               QTabWidget1    Button1    Button2

                         Wider QTabwidget2

Then, you set the height of QTabWidget1 so only the tabs show, and set QTabWidget2's tab bar height to 0 with a stylesheet:

QTabBar::tab {height: 0px;}

so only the bodies of the tabs show; not the tabs themselves.

Since they aren't thoughtful enough to expose a scroll method for the tab bar, you can fudge it by just changing the active tab via setCurrentIndex(); and it will stay in view.

You can then activate or de-activate the < and > buttons, depending on if the first or the last tab is already active. I'm not bothering to hide them nor disable them, since my app is mostly calculation and little polish.

Yes, it's a PITA. If there's no better way around it, just code around it. If life hands you a lemon, make lemon bombs, and show it who's boss. (Actually, almost always figuratively, only.) I'll submit a bug report one of these days, when I get time.

Maybe there are magic propert(ies) that can get those buttons to have normal backgrounds and sizes; but I don't know them.

Edit: Method #2: Solved my problem, but won't OP's (for those experiencing the same problem. I came here because of this problem when I wasn't trying to restyle these buttons. This is a known bug when using a stylesheet that a QTabBar either has or inherits: "When adding a style sheet to the tabs the navigation scroll arrow buttons become transparent". (Vote for this issue, and it'll get fixed faster.) Simply doing without the stylesheet solved my problem. Mine was on the parent form; and removing it and applying it to the element I wanted styled only, fixed it.

Method #3: You might try setting such properties as button width using non-stylesheet properties until it gets fixed; although I believe it'll mean subclassing the QTabWidget and QTabBar to access the QToolButton properties. It sounds worse than it is. You might can accomplish it with about a dozen lines of code in the header; although if you use Qt Creator in the Design tab, or Designer, you'll need to promote the tab widget.