Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include padding around HTML 5 'output' tag #9969

Closed
kennardconsulting opened this issue Aug 21, 2013 · 8 comments
Closed

Include padding around HTML 5 'output' tag #9969

kennardconsulting opened this issue Aug 21, 2013 · 8 comments
Labels
Milestone

Comments

@kennardconsulting
Copy link

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.

@mdo mdo closed this as completed in 9733a99 Aug 24, 2013
@kennardconsulting
Copy link
Author

You da man! Thanks

@ggam
Copy link
Contributor

ggam commented Aug 24, 2013

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

@kennardconsulting
Copy link
Author

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
Copy link
Contributor

ggam commented Aug 24, 2013

@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
Copy link
Member

mdo commented Aug 24, 2013

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
Copy link
Author

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
Copy link
Contributor

ggam commented Aug 25, 2013

@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
Copy link
Author

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.

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants