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!

 

15 thoughts on “Chrome 25 Bug – ExtJS 2.2 DatePicker extreme width

    • Yes you can replace it on ext-all.css or in some stylesheet of your application (as long as you include that file after the ext-all.css file)

  1. Hi
    i am having the same problem ,date numbers are now fixed wit your fix ,but the layout still taking width of the page ,plz help me how to fix
    with regards
    Bala

    • Can you explain a bit more (maybe with a sample in JSBin) your problem? What exactly happens to your layout? (I resolved this issue for the XEO Framework Date component which may not take into account other features of ExtJS you may be using)

    • Glad I could help, I spent sometime around this thing and didn’t find anything while searching so I thought I should share it 😉

Leave a Reply

Your email address will not be published. Required fields are marked *