How to create a vertical spinbox (arrows on top and bottom)

SlyPig

I've been trying to create a vertical spinbox that has the up/down arrows on the top/bottom instead of on each side. I don't see any general settings for this (maybe I missed something?) and I've played with several styleSheet settings for QSpinBox::up-button and QSpinBox::down-button, but can't seem to get anything to work consistently. Is there an 'easy' way to accomplish this?

SGaist

Hi and welcome to devnet,

~~AFAIK, there's no such thing. You'll have to build your own but you can get inspiration from QSpinBox and QAbstractSpinBox implementation.~~

I forgot, the effect searched can be achieved trough style sheets like @JonB correctly pointed to. You will lose the native look but that might not be one of your main worries.

JonB

@SlyPig
Not that I know the answer, but perhaps show the stylesheet stuff you tried? On https://doc.qt.io/qt-5/stylesheet-reference.html for QSpinBox it says

By default, the up-button is placed in the top right corner in the Padding rectangle of the widget. Without an explicit size, it occupies half the height of its reference rectangle. The up-arrow is placed in the center of the Contents rectangle of the up-button.

This would imply to me you ought/might be able to move it to top-center, and then push it upward (or make the spinbox taller?), maybe/hopefully?

SlyPig

Here's an example of the style sheet stuff I've tried:

QSpinBox
{
    border: 2px solid #498fd0;
}

QSpinBox::up-button
{
    min-width:44px;
    min-height: 44px;
    subcontrol-origin: margin;
    subcontrol-position: center;
    top: -30px;
    right: 0px;
}

QSpinBox::down-button
{
    min-width: 44px;
    min-height: 44px;
    subcontrol-origin: margin;
    subcontrol-position: center;
    bottom: -30px;
    left: 0px;
}

I've set the min/max size of the control to 60 wide and 100 high. Sort of looks like I want, but the arrow buttons don't seem right.

Thanks for anything you can contribute!

SimonSchroeder

Maybe you need to also explicitly specify something about QSpinBox::up-arrow/QSpinBox::down-arrow to get what you are looking for:
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qspinbox

SlyPig

Using the stylesheeet, I can get the up and down arrows to line up, but I can't seem to control the size of the up and down buttons. Adding a "max-height" field to QSpinBox::up-button or QSpinBox::down-button doesn't do anything. I also added new QSpinBox::up-arrow and QSpinBox::down-arrow settings like this:

QSpinBox::up-arrow
{
    min-height: 10px;
    max-height: 10px;
}

but none of the 'height' fields seem to do anything. This is what the widget looks like now:

If I can make the buttons smaller, I think this might work. Any ideas on how to just make the buttons smaller?

SimonSchroeder

Not all controls/subcontrols necessarily have the min-height/max-height properties. Did you try to use height instead? BTW having a closer look at the stylesheet example for the QSpinBox you should also plan for padding-top/padding-bottom on the entire spin box make room for the arrow buttons.

SlyPig

I played around with the stylesheet parameters more and was able to get a spin box look the way I wanted. The stylesheet parameters are as follows:

QSpinBox
{
    border: 2px solid #498fd0;
}

QSpinBox::up-button
{
    min-width:60px;
    min-height: 50px;
    subcontrol-origin: margin;
    subcontrol-position: center;
    top: -50px;
    right: 0px;
    width: 60px;
    height: 50px;
}

QSpinBox::down-button
{
    min-width: 60px;
    min-height: 50px;
    subcontrol-origin: margin;
    subcontrol-position: center;
    bottom: -50px;
    left: 0px;
    width: 60px;
    height: 50px;
}

If I set the size of the control to min/max of 70 x 160 and a font size of 30 px and aligned horizontally, I get the following:

Now, the up and down arrows don't work.
Still investigating...

SlyPig

I was finally able to get this working. The trick was with padding. Here are the stylesheet parameters:

QSpinBox
{
    border: 2px solid #498fd0;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 50px;
    padding-bottom: 50px;
}

QSpinBox::up-button
{
    width:60px;
    height: 50px;
    right: 3px;
    top: 2px;
}

QSpinBox::down-button
{
    width:60px;
    height: 50px;
    right: 3px;
    bottom: 2 px;
}

Thanks to all who contributed!