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

IE8 - Long <label>s overflow container (words do not wrap) #13141

Closed
davidpauljunior opened this Issue Mar 21, 2014 · 10 comments

Comments

Projects
None yet
5 participants
@davidpauljunior
Copy link

davidpauljunior commented Mar 21, 2014

  1. Use native IE8
  2. Have a label (e.g. in a form) where the label length would required the words to wrap onto the next line.
  3. Words don't wrap, they overflow container.

Mockup code here (but JSBIN doesn't actually work in IE8 so not too much help): http://jsbin.com/jahah/2/edit

ie8-label-words-not-wrapping

@cvrebert cvrebert changed the title IE8 - Long labels overflow container (words do not wrap) IE8 - Long <label>s overflow container (words do not wrap) Mar 21, 2014

@cvrebert cvrebert added the css label Mar 21, 2014

@davidpauljunior

This comment has been minimized.

Copy link
Author

davidpauljunior commented Mar 23, 2014

max-width: 100% seems to fix.

@mdo mdo added this to the v3.2.0 milestone Mar 25, 2014

@mdo mdo closed this in 6f6bce5 Mar 25, 2014

@mdo mdo referenced this issue Mar 25, 2014

Closed

v3.2.0 ship list #12736

@zxbodya

This comment has been minimized.

Copy link

zxbodya commented Jun 6, 2014

This fix conflicts with tinymce and probably some other scripts. Because of this fix script can not determine correct label width.

There is an example:
http://fiddle.tinymce.com/wjeaab/1

Problem appears in "insert/edit image" popup.
screen shot 2014-06-06 at 11 45 43 pm

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 6, 2014

@zxbodya We don't claim to be compatible with third-party widgets in the first place.

@zxbodya

This comment has been minimized.

Copy link

zxbodya commented Jun 6, 2014

Of course, it cannot be compatible with everything... After all - if it would be required, I can override this rule at my own...

But I think that this fix is too dangerous and it can break compatibility with many other third-party libraries not only tinymce... And it can add some difficulties for developers - eventually I spent few hours until found a cause

I believe, there should be better solution for this problem...

I have tried to reproduce original problem. And - eventually there is no problem in IE8 at all.

It works as it should without this fix...
Link from issue description:
screen shot 2014-06-07 at 12 53 52 am

Also text wraps correctly when I resize IE8 window...

The only way to achieve result as on attached screenshot is to change label text using buggy IE developer tools(actually blue border around label is because of this).

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 6, 2014

I'm able to reproduce the original bug without using the Developer Tools:
0001screenshot
Details: https://github.com/twbs/bootstrap/tree/ie8-label-wrap-bug

@zxbodya

This comment has been minimized.

Copy link

zxbodya commented Jun 7, 2014

Yes, you are right - Now, I also reproduced it (http://jsbin.com/komawotu/1/edit)

Sorry, at first, I misunderstood where is bug - so, I have tested only on link provided in bug description..

It seems, this is the only way too fix this bug for IE8. But I am still not sure, that this should be done globally - maybe, it is not so often problem and can be fixed in place where it appears.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 7, 2014

Yeah, it'd be better to put the fix into a class instead of all <label>s, but we don't really have a generic class for labels at the moment. I'll add a note to try and fix this in v4 though.

@ahocquet

This comment has been minimized.

Copy link

ahocquet commented Jul 22, 2014

Hi,

This fix introduced a bug with form-inline. Indeed, now labels are not displayed on the right of input boxes but on the top, like a form-horizontal. I can't copy/paste a screen shot right now, but it's easily reproducible by coding a simple form-inline form.

How can we fix that ?

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jul 22, 2014

@ahocquet File a new issue please.

@twbs twbs locked and limited conversation to collaborators Jul 29, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jan 14, 2015

X-Ref: #15275

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.