Question

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.

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.

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?)

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.

EDIT:
Solved nearly as per bmoeskau’s answer but changed

table.x-date-inner {
    width: 100%;
    table-layout:auto;
}

to

table.x-date-inner {
    width: 200px;
    table-layout:auto;
}

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

Answer 1

This has to do with a change in how tables were rendered in FF 3.x compared to 2.x. You should be able to add this CSS fix anywhere after the Ext CSS (I think — this is from memory since the Ext forums aren’t loading at the moment):

table.x-date-inner {
    table-layout: fixed;
}

You should inform your client that Ext 1.x has not been supported officially for quite some time, so other issues like this are likely to crop up as browsers progress forward.