I need to style QSpinBox
like this:
But when I did it with stylesheet, both down-button
and up-button
were incrementing value, where down-button
should have decremented it.
Stylesheet:
QSpinBox {
border: 1px solid gray;
border-radius: 3px;
padding: 2px;
}
QSpinBox::up-button, QSpinBox::down-button {
width: 40px;
height: 50px;
subcontrol-origin: border;
subcontrol-position: top right;
border: 1px solid gray;
border-radius: 3px;
}
QSpinBox::up-arrow, QSpinBox::down-arrow {
width: 10px;
height: 10px;
}
QSpinBox::up-button {
image: url(:/icons/ui/images/icons/arrow-up.svg);
margin-right: 40px;
}
QSpinBox::down-button {
image: url(:/icons/ui/images/icons/arrow-down.svg);
margin-left: 2px;
}
When I placed up-button
on top, and down-button
on bottom, they worked fine.
Place up-button
on the right, and down-button
on the left.
This requires splitting their stylesheets, and adding a margin-right
to down-button
with the value of up-button
's width.
Minimal necessary stylesheet that keeps the buttons laid out horizontally, separated, and functioning. Build from this step by step, and go back one step when it stops working:
QSpinBox {
border: 1px solid gray;
}
QSpinBox::up-button {
border: 1px solid red;
subcontrol-position: top right;
width: 30px;
}
QSpinBox::down-button {
border: 1px solid blue;
subcontrol-position: top right;
width: 30px;
margin-right: 30px;
}