ls -d */
apt-get install history
/var/log/apt/history.log
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>
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>
- Fixed:
- 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
- row : encloses one row in the layout
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>