Joe Sharples
Posts: 0
Joined: Mon Aug 18, 2014 1:31 pm

Radio button height

Image

how do I change the height of the radio buttons so they are all the same?

I already have the CSS asset below.

pre

.nightRadio .ui-controlgroup-controls {
width:100%;
}

.nightRadio .ui-radio {
width:33.33%;
}

.nightRadio label {
text-align:center !important;
}
/pre

.nightRadio is the radiobutton class name.

I've tried using
pre
.nightRadio {
height: 50px;
}
/pre
and
pre
.nightRadio .ui-controlgroup-controls {
height: 50px;
}
/pre
and
pre
.nightRadio .ui-radio {
height: 50px;
}
/pre

but this did not work

Joe Sharples
Posts: 0
Joined: Mon Aug 18, 2014 1:31 pm

Radio button height

Resolved:

pre
.nightRadio .ui-btn {
height: 50px;
}
/pre

Joe Sharples
Posts: 0
Joined: Mon Aug 18, 2014 1:31 pm

Radio button height

Image

how would i align the text vertically?

I have tried:

pre
.nightRadio label {
text-align:center !important;
vertical-align: middle !important;
}
/pre

this didn't work

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Radio button height

Hello Joe,

Please follow this tutorial: https://css-tricks.com/centering-css-...

Joe Sharples
Posts: 0
Joined: Mon Aug 18, 2014 1:31 pm

Radio button height

Thanks Sergiy

solved:

pre
.nightRadio label {
text-align:center !important;
display: flex;
justify-content: center;
flex-direction: column;
}
/pre

Return to “Issues”