I need to change the orientation of a set of radio buttons. I need to change them to horizontal instead of vertical. I have successfully changed the webform-form [nid].tpl.php theme file but I don't understand how to change the orientation of radio buttons. How can I do this.

g

Comments

gwlangie’s picture

gwlangie CreditAttribution: gwlangie commented
Title: inline radio » inline radio button

I really need some help getting the radio buttons to line up horizontally and not vertically. I have been successful at modifying the positions of edit boxes in my custom form but not the radio buttons.

Some guidance would be appreciated.
thanks
g

aaron1234nz’s picture

aaron1234nz CreditAttribution: aaron1234nz commented

In the css try adding this:
.form-radios .form-item {
display:inline;
}

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented
Status: Active » Closed (fixed)
glennnz’s picture

glennnz CreditAttribution: glennnz commented
Status: Closed (fixed) » Active

This works perfectly, except that I have a form in a node, and one in a block.

How can I get my node to display the radio buttons inline, and my block to display them vertically?

Thanks

Glenn

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented

Target the block specifically with CSS.

.block .form-radios .form-item {
display:inline;
}

Note that Garland does not have a "block" class on its blocks, but just about every other theme does, you might need to adjust the name of the class. This is a basic CSS question, I'd recommend looking at tutorials or a book on CSS. I like the http://w3schools.com website.

glennnz’s picture

glennnz CreditAttribution: glennnz commented

Got this working

I had to specify both .node and .block CSS items:

.block .form-radios .form-item {
display:block;
}

.node .form-radios .form-item {
display:inline;
}

Glenn

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented
Status: Active » Closed (fixed)
Hitmrrr’s picture

Hitmrrr CreditAttribution: Hitmrrr commented
Version: 6.x-2.1.2 » 6.x-3.1

Hi!

css settings will be lost if one of the fields is not filled (required field), how can make whatever css settings were.

asim.shahzad’s picture

asim.shahzad CreditAttribution: asim.shahzad commented

This really helped me in making radio buttons horizontaly align.

mahtab_alam’s picture

mahtab_alam CreditAttribution: mahtab_alam at Valuebound commented
Issue summary: View changes 
.radio, .checkbox {
    position: relative;
    display: inline-block;
}

This worked for me..

danilosantosalvarado’s picture

danilosantosalvarado CreditAttribution: danilosantosalvarado commented

I managed to give styles to a radio button with the structure that gives drupal.

drupal structure.



Oranges

css:
.numero2 .radio input[type="radio"], .numero2 .checkbox input[type="checkbox"] {
display: none;
}
.numero2 .radio input[type="radio"], .numero2 .checkbox input[type="checkbox"] {
width: 15px;
height: 15px;
display: inline-block;
background-color: #fff;
box-sizing: border-box;
border: 1px solid black;
border-radius: 0px;
transition: border-color .2s;
margin: 3px 0px 0px -25px;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
.numero2 .radio input[type="radio"]:checked, .numero2 .checkbox input[type="checkbox"]:checked {
background: url(../img/chulo.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
}

apaderno’s picture

apaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
CreditAttribution: apaderno as a volunteer commented
Version: 6.x-3.1 » 6.x-2.x-dev