There is a strange behavior that I cannot explain...
I am working with a series of buttons:
<h:commandButton value="foo" actionListener="#{foo.foo}" styleClass="btn btn-danger">
<f:ajax render=":form"></f:ajax>
</h:commandButton>
<h:commandButton value="bar" actionListener="#{foo.bar}" styleClass="btn btn-danger">
<f:ajax render=":form"></f:ajax>
</h:commandButton>
<h:commandButton value="car" actionListener="#{foo.car}" styleClass="btn btn-danger">
<f:ajax render=":form"></f:ajax>
</h:commandButton>
All the buttons are being displayed smashed together:
Upon inspecting the markup (using Chrome Inspect Element):
<input id="j_idt92" type="submit" name="j_idt92" value="foo" class="btn btn-danger" onclick="mojarra.ab(this,event,'action',0,'form');return false">
<input id="j_idt92" type="submit" name="j_idt92" value="bar" class="btn btn-danger" onclick="mojarra.ab(this,event,'action',0,'form');return false">
<input id="j_idt92" type="submit" name="j_idt92" value="car" class="btn btn-danger" onclick="mojarra.ab(this,event,'action',0,'form');return false">
If I take this modified markup and paste it directly into my view, the buttons appear differently:
When defining simple buttons with class="btn btn-danger", they are properly spaced out as expected.
Why is this happening?