html – Kev's Development Toolbox

November 25, 2015

Bootstrap dropdown nav menus not working? (and solution)

It’s not immediately obvious unless you’ve run into this before, but the dropdown nav menu feature of Bootstrap requires both jQuery and the bootstrap.js includes. Maybe because I normally don’t use any of the JavaScript features of Bootstrap I haven’t run into this before. It is covered in the install docs here as a requirement, but maybe I’ve not noticed this before. It must be a common issue though, here’s a question on SO.

If you leave out either of these the menu renders as expected but the dropdown doesn’t do anything. Here’s a plunkr with both .js files included as a working example (example HTML from the example here).

August 7, 2013

Firefox ends support for the HTML tag?!

Wow! In a way it’s strange that this didn’t happen sooner. I wasn’t actually aware that Chrome, Safari and Opera had all already dropped support?

Can’t say I’ve seen any sites for a number of years that actually still use <blink>, but I do remember plenty of sites ‘back in the day’ that made extremely annoying use of this tag.

January 3, 2013

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>

January 3, 2013

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>