Chrome 25 Bug – ExtJS 2.2 DatePicker extreme width

Hi everyone,

Chrome 25 was released just a few days ago and apparently it has an issue with CSS rendering. I couldn’t find much more on this, but there are some people complaining I’ve found out about this because of an issue with the DatePicker widget in ExtJS 2.2 (the version XEO ships with). I went on and tested Chrome with ExtJS 3 and 4 but the issue it not present.

This is what happens when you click on the DatePicker widget with Chrome 25

Chrome 25 DatePicker

Chrome 25 DatePicker

What happens is that when doing width calculations, there are some issues when width:100% is used, I can’t pin-point the situation exactly, but basically the DatePicket gets a width of more than 10.000 px wide. I found this to solve my problems with the DatePicker, so if you suffer from the same problem, use it:

/* Chrome25 Bug fix, 100% width causes issues with the date picker, replaced with a fixed width*/
table.x-date-inner {
   width:200px !important; /* original was width : 100% */
}

Just add this to a CSS your application uses, or replace the one in ExtJS. Hope it helps, I had to dig a lot in ExtJS source (and debugging in Google Chrome) to find out what was happening to produce a such a strange effect (that was not present in version 24).

Happy coding!