JqueryUI handles Internet Explorer 10 without the ability to click

Question

I have a problem with jQueryUI resizable and Internet Explorer. I am creating a resizable div that contains a span with some text in it. In IE10, if the text is larger than the container div, the div handles are only available above the text and below. It works great in Chrome.

This is the code (I checked jsFiddle for testing):

HTML

<div id="event"> <span>some text some text</span> </div> 

CSS

 #event { float: left; position: absolute; border: 2px solid #197ea3; background: #aee3f4; height: 16px; overflow: hidden; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 16px; padding-left: 3px; white-space: nowrap; text-overflow: ellipsis; } 

Javascript

 $(document).ready(function() { $("#event").resizable({ handles : "e" }) }); 

EDIT: I added the text-overflow: ellipsis and updated jsFiddle

Answer 1

Oh yes IE is the best (worst). Unfortunately, I'm at work, so I will have to study this more carefully when I get home, but here's a quick suggestion:

At first, I would recommend not only considering IE 10, but also thinking about earlier versions of IE (regression to 7 or 8). Yes, there are people (especially company computers) stuck in the Stone Age.

Now in the header section, I would add:

 <meta http-equiv="X-UA-Compatible" content="IE-7;IE-8;IE-9;IE-10;" /> 

Let me know if this helps you!

Answer 2

Thanks to my boss, I found a simple and elegant solution: text-overflow: ellipsis . This css property (which I did not know, shame on me) adds three dots at the end of the text if the text is larger than the container. These dots are apparently not considered "standard text", so do not go through the descriptor.

Unfortunately, this is not a complete solution, because if the text is large EXACTLY like a container, dots are not displayed, and descriptors remain inaccessible ...

I will edit the jsFiddle link in the question with the new property.