Question

The selectOneRadio element in JSF is translated to a table, where the radio button and its label are put within the same <td> in a table.

<!-- JSF Element -->
<h:selectOneRadio id="types" label="Type"
    value="#{bean.selectedType}"
    layout="pageDirection">
    <f:selectItems value="#{bean.types}"/>
</h:selectOneRadio>

<!-- Generated HTML -->
<table id="j_id_i:types">
    <tbody>
         <tr>
             <td>
                 <input id="j_id_i:types:0" type="radio" value="VALUE1"
                     name="j_id_i:types"/>
                 <label for="j_id_i:types:0"> Value #1</label>
             </td>
         </tr>
         <tr>...</tr>
         ...
    </tbody>
</table>

Before I was using Bootstrap, the elements within the <td> would appear side by side, but now look under each other.

The processed CSS for the element is the following, as given by Firebug.

table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    color: #333333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
}
html {
    font-size: 100%;
}

I have no clue what may be producing such behaviour. It’s not a concern of width, as this is the single element within the <div>, and without bootstrap it is rendering side by side.

Answer 1

That’s because the <label> has due to the Bootstrap CSS become a HTML block element which starts naturally at a new line.

You need to make it a HTML inline element again. So, you need to override the Bootstrap CSS accordingly. Perhaps you want to apply this for labels in table cells only. E.g.

td label {
    display: inline;
}