StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In my opinion it is a bug. </p> <p>Workaround: if you add a <code>top: 0;</code> to the css rule for <code>#resizable</code> IE, chrome and firefox have the same behavior. Also see the <a href="http://jsfiddle.net/bqGwW/2/" rel="nofollow">updated example</a>. </p> <p>=== UPDATE ===</p> <p>It's a firefox bug. I walked from the jQuery UI <em>resizable</em> method code until the <em>css</em> method of jQuery (main) code to find an answer. At the end of my search I could found that firefox returns for css <code>top</code> value <code>auto</code> for not/static positioned elements, but returns <code>0px</code> if relative position is set; in both cases <code>top</code> is not defined (they could be set to <code>auto</code> with no difference - it's the default value). </p> <p>Also see <a href="http://jsfiddle.net/jHnSu/2/" rel="nofollow">this example</a>. </p> <p>In the <em>resizable</em> method this result makes the difference (jQuery UI sets the relative position to the DOM element by adding a class). If the bug (which I have reported to mozilla) will be fixed, the behavior of your example in the firefox should be the same as in chrome.</p> <p>I'll report here if there is something new...</p> <p>=== UPDATE ===</p> <p>Now I have a workaround for you:</p> <p>for the special situation you described set the css position of your resizable element manually to <code>static</code>. </p> <p>Add to your stylesheets:</p> <pre><code>#resizable { position: static; } </code></pre> <p>Also see <a href="http://jsfiddle.net/bqGwW/4/" rel="nofollow">your updated example</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload