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

Label gets cut off at the end when adding a glyphicon #13219

Closed
dsullivan7 opened this issue Mar 28, 2014 · 6 comments
Closed

Label gets cut off at the end when adding a glyphicon #13219

dsullivan7 opened this issue Mar 28, 2014 · 6 comments
Labels
Milestone

Comments

@dsullivan7
Copy link

@dsullivan7 dsullivan7 commented Mar 28, 2014

It appears that Label's get cut off at the end when there is an overflow and there is a glyphicon at the end. This appears in Safari and Chrome but not in Firefox. Related to #5376 Here is a fiddle to demonstrate:

http://jsfiddle.net/D2RLR/5533/

@cvrebert cvrebert changed the title Label get's cut off at the end when adding a glyphicon Label gets cut off at the end when adding a glyphicon Mar 28, 2014
@cvrebert cvrebert added css labels Mar 28, 2014
@nhall
Copy link

@nhall nhall commented Mar 29, 2014

Changing the .label display from inline to inline-block would fix this but I am not sure of other implications where this would not be ideal.

nhall added a commit to nhall/bootstrap that referenced this issue Mar 29, 2014
> Label gets cut off at the end when adding a glyphicon twbs#13219
@juthilo juthilo added this to the v3.2.0 milestone Mar 29, 2014
@dsullivan7
Copy link
Author

@dsullivan7 dsullivan7 commented Mar 30, 2014

@nhall's fix solved my issue, I would recommend merging and closing this. Thanks!

@dsullivan7 dsullivan7 closed this Apr 2, 2014
@cvrebert cvrebert reopened this Apr 2, 2014
@mdo
Copy link
Member

@mdo mdo commented Apr 8, 2014

Pretty sure this is just because you're placing an inline-block element within an inline element. I think the only logical and practical solution for this is to add something to the docs and encourage folks to change the style as they need. Moving back to inline-block doesn't feasible without affecting computer height of elements.

@cvrebert cvrebert added the docs label Apr 29, 2014
@mdo
Copy link
Member

@mdo mdo commented Jun 11, 2014

This apparently only happens because of the spacing of your HTML. See http://jsbin.com/juquh/1/. The top half is fine, and the second half is busted. This is because the top half's HTML is formatted to be more verbose (new lines, meaning rendered white space) while the bottom half is all one line without a line break or space.

@mdo
Copy link
Member

@mdo mdo commented Jun 11, 2014

We can't change the inline to inline-block because it affects the computed line-height, so a docs callout it is. Rough.

mdo added a commit that referenced this issue Jun 11, 2014
@mdo mdo closed this Jun 11, 2014
@nhall
Copy link

@nhall nhall commented Jun 11, 2014

Exactly, whitespace in the HTML will lead to space around elements set to inline-block. There are a few ways to fix this, particularly when you have control over the HTML output. There's a good write up on CSS Tricks, 'Fighting the Space Between Inline Block Elements'.

@twbs twbs locked and limited conversation to collaborators Aug 25, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.