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

Comments

Projects
None yet
5 participants
@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 from Label get's cut off at the end when adding a glyphicon to Label gets cut off at the end when adding a glyphicon Mar 28, 2014

@cvrebert cvrebert added css labels Mar 28, 2014

@nhall

This comment has been minimized.

Show comment
Hide comment
@nhall

nhall 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 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

Possible fix to issue #13219
> Label gets cut off at the end when adding a glyphicon #13219

@juthilo juthilo added this to the v3.2.0 milestone Mar 29, 2014

@dsullivan7

This comment has been minimized.

Show comment
Hide comment
@dsullivan7

dsullivan7 Mar 30, 2014

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

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Apr 8, 2014

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jun 11, 2014

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jun 11, 2014

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@nhall

nhall 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'.

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.