StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIssues with Ext-JS 1.1 date fields and Firefox 3.x / IE 8
text
Body
copied!<p>100%I'm modifying an older website for a client that uses Ext-JS 1.1 and I'm having issues with display of date fields in IE and particularly Firefox. The site was left in a semi-implemented state previously, so there's not been a perceived problem before. </p> <p>In Chrome and Safari everything looks fine and the datepicker drops down and displays correctly. However in Firefox the picker is displayed widened to cover the maximum scrollable brower width (very wide indeed), and in IE it's truncated to about two thirds of the width it should be.</p> <p>I am somewhat uncertain that this is due to our css, but because Chrome and Safari work fine I think it might be a problem with Ext-js itself. I realise that this is an old version of Ext-JS, but because everything else works fine I don't want to go to the trouble of upgrading unless that would be very straightforward (but how difficult would that be?)</p> <p>I don't myself use ExtJS and this is the only website my client has with it - so I'm really looking for the simplest possible solution. </p> <p>EDIT: Solved nearly as per bmoeskau's answer but changed</p> <pre><code>table.x-date-inner { width: 100%; table-layout:auto; } </code></pre> <p>to </p> <pre><code>table.x-date-inner { width: 200px; table-layout:auto; } </code></pre> <p>Which changes the previous width from 100% to a fixed px value which works on Firefox. The drop-down is still truncated in IE, but I can live with that and an instruction to my client that he'll need to upgrade the JS library to solve that one</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