Category: Tech Notes

Posted on

Fixing JSF Radio Button layout when using Twitter Bootstrap

Twitter Bootstrap adds ‘display:block’ to labels by default, which oddly affects the way radio buttons are displayed if renderd using JSF – the label drops down to the next line.

To work around this, add a class using styleClass to the <h:selectOneRadio> tag, and then use some additional CSS to set display back to ‘inline’ for labels within an element using the class you used on the selectOneRadio tag.

Here’s some example CSS:

.inlineRadioButtons {
}

.inlineRadioButtons label {
    display: inline;
}

And here’s it used on some JSF generating radio buttons:

<h:form>
    <h:panelGrid columns="2">
    <h:outputText value="Color:" />
    <h:selectOneRadio value="#{testBean.selectedColor}"
        styleClass="inlineRadioButtons">
        <f:selectItems value="#{testBean.colors}" var="#{item}"
            itemValue="#{item}" itemLabel="#{item.desc}"></f:selectItems>
    </h:selectOneRadio>
    </h:panelGrid>
    <h:commandButton action="#{testBean.save}" value="Save" styleClass="btn btn-primary"/>
</h:form>
Posted on

Twitter Bootstrap essentials

Twitter Bootstrap is a great way to get started with a CSS look and feel for a site or webapp without spending much time yourself messing with your own CSS.

In a nutshell, here’s the essentials:

  • You must use the HTML5 doctype,without it, your layouts in IE look random:
<!DOCTYPE html>
<html lang="en">
...
</html>
  • Layout can either be:
    • Fixed: 
      <div class="container">
...
<div>
    • or Fluid: 
      <div class="container-fluid">
...
</div>
  • The layout is based on 12 columns. Use the following classes to control your layout with the 12 columns – the number of offset columns and spanned columns should total 12. Offset and Span classes can be combined:
    • row : encloses one row in the layout 
      <div class="row">
...
</div>
    • offsetX : where X is a number of columns to offset 
      <div class="offset1 span2">
...
</div>
    • spanX : where X is the number of columns to span

Complete example:

<div class="container">
    <div class="row">
        <div class="offset1 span2">Left column</div>
        <div class="span8">right column, one column left blank on right</div>
    </div>
</div>
Proudly powered by WordPress