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
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!
Thank You Very Much Sir…………..
Thank you very much!
Just to make sure you need to replace it on ext-all.css
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)
Awesome! FYI This fix works in ExtJS 1.0 as well. It also fixes the problem in Firefox 3+
Nice to know about it. Thanks for sharing Will!
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)
Brilliant, worked a treat for me. Thanks
a really simple solution, thanks a lot!!
Saved me lots of time. Thank you much.
Your post saved me a ton of debugging time! Thanks a bunch!
Thanks a lot!
Very useful…Thanks a lot Pedro!!
Thanks bro, you’ve saved my life. 🙂
Glad I could help, I spent sometime around this thing and didn’t find anything while searching so I thought I should share it 😉