Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



  • 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?


  • Lifetime Qt Champion

    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.



  • @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?



  • 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!



  • 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



  • 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:

    SpinBox.png

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



  • 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.



  • 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:

    SpinBox2.png
    Now, the up and down arrows don't work. uhoh.gif
    Still investigating...



  • 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!


Log in to reply