Position <form:radiobuttons> vertically

css, html, jsp, spring-mvc

Solution

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>

Problem

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?

Original source