JqueryUI handles on Internet Explorer 10 not clickable

Question

I have a problem with jQueryUI resizable and Internet Explorer. I'm creating a resizable div which contains a span with some text in it. In IE10, if the text is larger than the container div, the div's handles are clickable only above and below the text. In Chrome it works perfectly.

This is the code (I made a 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 property and updated the jsFiddle

score 0 · Answer 1 · answered Feb 18 '13 at 15:16

0

Ah, yes IE at it's best (worst). Unfortunately, I'm at work so I will have to look into this more thoroughly when I return home, but here's a quick suggestion:

First I would recommend not ONLY accounting for IE 10 but also think about earlier versions of IE (regress down to 7 or 8). Yes there are people (company computers especially) stuck in the stone age.

Now In your header section I would add:

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

Let me know if that helps you out!

answered Feb 18 '13 at 15:16

Abraxas

374
3
10

About developing for earlier versions of IE: I'm developing for IE10 because unfortunately the work I'm doing relies heavily on video manipulation, and IE does this much better than the other browsers. But luckily, this isn't for a public website, so I can force users to work the way I decide ^_^ That said, I tried to add that meta, but nothing seems to be changed... – goffreder Feb 18 '13 at 15:26
http://stackoverflow.com/questions/2634894/jquery-ui-resizable-auto-height-when-using-east-handle-alone -take a look at this and the links within the comments. Hope that helps out – Abraxas Feb 18 '13 at 16:06
1

I already read the documentation on jQueryUI website (which, for the record, I think is a bit inaccurate in some points), but I can't use the `aspectRatio` property, because the height of the container div is fixed. By the way, the same thing happens if I don't use a `span` inside the div... – goffreder Feb 18 '13 at 17:05
Agreed, on my last project I had some qualms with the documentation on jQUI as well. Any recent progress? – Abraxas Feb 18 '13 at 20:57
None so far, I also tried to work a bit with offsets and margins, but that doesn't seem to work. And the developer tools for IE are kinda annoying, to be polite (especially compared with Chrome ones)... – goffreder Feb 18 '13 at 23:51
damn. yeah i'm having issues on my end too. im going to give it a rest for a second but i'll let you know if i find anything through PM! – Abraxas Feb 19 '13 at 01:24

score 0 · Answer 2 · answered Feb 19 '13 at 18:31

Thanks to my boss, I found a simple and elegant solution: text-overflow: ellipsis. This css property (which I didn't know, shame on me) adds three dots at the end of the text if the text is larger than the container. These dots apparently don't count as "standard text", so the don't go over the handle.

Unfortunately, this isn't a complete solution, because if the text is large EXACTLY as the container, the dots don't appear and the handles remain unreachable...

I'll edit the jsFiddle link on the question with the new property.

JqueryUI handles on Internet Explorer 10 not clickable

2 Answers2