Tag: css

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>
Posted on

Fixing Twitter Bootstrap rendering issues in Internet Explorer

Internet Explorer’s interpretation of CSS compared with all the other browsers sometimes bewilders me. To get Twitter Bootstrap to render at all like the other browsers, apparently it’s important that you have to specify the doctype, otherwise it seems to render layout related CSS all over the place. Just include this at the top of your source:

<!DOCTYPE HTML>

I found this as an answer to this post on StackOverflow.

Proudly powered by WordPress