Customize QSpinbox

minjunkim

hi,

i want to customize QSpinbox

Below is the picture I want.

I think other things are possible by using stylesheet

but i don't know how to get up-down button.

i want to solve it through using stylesheet or inherit QSpinbox.

is there some ideas?

minjunkim

I got the following results.

code is

QSpinBox {
padding-right: 15px; /* make room for the arrows */
border-color: rgb(0, 0, 0);
border-width: 3;
}

QSpinBox::up-button {
subcontrol-origin: border;
subcontrol-position: center right; /* position at the top right corner /
width: 16px; / 16 + 2*1px border-width = 15px padding + 3px parent border */
border-image: url(:/new/prefix1/icon/up_arrow_disabled.png);
border-width: 1px;
}

QSpinBox::down-button {
subcontrol-origin: border;
subcontrol-position: center right ; /* position at bottom right corner */
width: 16px;
border-image: url(:/new/prefix1/icon/down_arrow_disabled.png) 1;
border-width: 1px;
border-top-width: 1;

 border-right-width:20;

}

minjunkim

Re: Customize QSpinbox

I got the following results.

The right part of the down button does not collapse.. why??

code is

QSpinBox {
padding-right: 15px; /* make room for the arrows */
border-image: url(:/images/frame.png) 4;
border-width: 3;
}

QSpinBox::up-button {
subcontrol-origin: border;
subcontrol-position: center right; /* position at the top right corner /
width: 16px; / 16 + 2*1px border-width = 15px padding + 3px parent border */
border-image: url(:/new/prefix1/icon/up_arrow.png) 1;
border-width: 1px;
}

QSpinBox::down-button {
subcontrol-origin: border;
subcontrol-position: center right ; /* position at bottom right corner */
width: 16px;
border-image: url(:/new/prefix1/icon/down_arrow.png) 1;
border-width: 1px;
border-top-width: 1;

 padding: -16 12px 0 24px; // part of issue

}

minjunkim

I got the following results.

code is

QSpinBox {
padding-right: 15px; /* make room for the arrows */
border-color: rgb(0, 0, 0);
border-width: 3;
}

QSpinBox::up-button {
subcontrol-origin: border;
subcontrol-position: center right; /* position at the top right corner /
width: 16px; / 16 + 2*1px border-width = 15px padding + 3px parent border */
border-image: url(:/new/prefix1/icon/up_arrow_disabled.png);
border-width: 1px;
}

QSpinBox::down-button {
subcontrol-origin: border;
subcontrol-position: center right ; /* position at bottom right corner */
width: 16px;
border-image: url(:/new/prefix1/icon/down_arrow_disabled.png) 1;
border-width: 1px;
border-top-width: 1;

 border-right-width:20;

}