Include padding around HTML 5 'output' tag

[kennardconsulting]

The HTML 5 output tag is useful semantic markup to denote the 'result of a calculation' or a data lookup. It fills a hole in form markup. For example, if this is the editable version of a form:

<label for="name">Name:</label><input id="name" type="text" value="Bob"/>

Then this can be its read-only variant:

<label for="name" value="Name:"/><output id="name">Bob</output>

This is preferrable to surrounding 'Bob' with span tags (or no markup). And it's more semantically correct than using label tags IMHO.

However Bootstrap does not format output tags inside forms very well. I believe they need:

display: block; padding: 5px;

...so that they line up with the labels and input tags.

[kennardconsulting]

You da man! Thanks

[ggam]

Doesn't it overlap with form-control-static?

[kennardconsulting]

I wasn't aware of form-control-static - thanks for pointing it out!

However now that I look at it, I think use of an output tag has more semantic meaning than a p (or whatever). So I'd like to see it styled by default (without needing an additional form-control-static class on it). Is that reasonable? You can still keep form-control-static for those that want it.

[ggam]

@kennardconsulting that's exactly why I mentioned it. As ìnput's are not styled by default, I think neither output should be. But we should update the example in the docs to use it as it makes more sense. What do you think @mdo?

[mdo]

Perhaps, but the output isn't "static" or textual content—it's dynamic and is a form control. We style some individual form controls already, so this isn't beyond our approach really. We could mixin things I suppose though.

[kennardconsulting]

At least as far as Bootstrap v2.3.2 goes (perhaps all the rules have changed for v3?) the padding I am referring to is padding: 4px 6px; at line 1095 of bootstrap.css. This seems to be default styling for all select, textarea and input components (but not output)?

[ggam]

@kennardconsulting I think it has been changed in v3.
As input's are not styled by default, neither output should be. Maybe we just can update the documentation to use output instead of p?

[kennardconsulting]

Hello again. I've just upgraded to Bootstrap v3 and this isn't working as I'd hoped :(

Whilst I can now add form-control to my output tags, that makes them look like input controls (i.e. white background, border, etc). What I want is to add the padding: 6px 12px found in form-control without also adding everything else.

What is the recommended way to do this? I see the documentation is still using p tags, which seems semantically wrong to me.