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

[tulipdexter]

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

[tulipdexter]

max-width: 100% seems to fix.

[zxbodya]

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.

[cvrebert]

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

[zxbodya]

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:

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]

I'm able to reproduce the original bug without using the Developer Tools:

Details: https://github.com/twbs/bootstrap/tree/ie8-label-wrap-bug

[zxbodya]

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]

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]

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]

@ahocquet File a new issue please.

[cvrebert]

X-Ref: #15275