nuttynibbles nuttynibbles - 2 months ago 15
CSS Question

Position <form:radiobuttons> vertically

I'm using Spring MVC

<form:radiobuttons>
to display radio buttons:

<form:radiobuttons path="selection" items="${arraySelection}" />


However, it displays them horizontally. The generated HTML is as follows:

<span>
<input id="selection1" type="radio" value="0"" name="selection">
<label for"selection1">Off</label>
</span>
<span>
<input id="selection2" type="radio" value="1"" name="selection">
<label for"selection2">On</label>
</span>


How do I display them vertically?

Answer

You could change the default wrapper (which is <span>) to something else that you can manipulate better, like <li> for example.

You can use the element attribute to change the wrapper:

<ul>
  <form:radiobuttons path="selection" items="${arraySelection}" element="li" />
</ul>

It's then just a matter of styling it how you want:

ul.verticalRadios {
  list-style-type: none;
  /* or whatever */
}

...

<ul class="verticalRadios">
  <form:radiobuttons path="selection" items="${arraySelection}" element="li" />
</ul>
Comments