{"id":213,"date":"2013-02-26T23:11:28","date_gmt":"2013-02-26T23:11:28","guid":{"rendered":"http:\/\/www.corrspt.com\/blog\/?p=213"},"modified":"2013-02-26T23:13:23","modified_gmt":"2013-02-26T23:13:23","slug":"chrome-25-bug-extjs-2-2-datepicker-extreme-width","status":"publish","type":"post","link":"http:\/\/www.corrspt.com\/blog\/2013\/02\/26\/chrome-25-bug-extjs-2-2-datepicker-extreme-width\/","title":{"rendered":"Chrome 25 Bug – ExtJS 2.2 DatePicker extreme width"},"content":{"rendered":"

Hi everyone,<\/p>\n

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<\/a> complaining<\/a> 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.<\/p>\n

This is what happens when you click on the DatePicker widget with Chrome 25<\/p>\n

\"Chrome<\/a>

Chrome 25 DatePicker<\/p><\/div>\n

What happens is that when doing width calculations, there are some issues when width:100%<\/strong> 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:<\/p>\n

\/* Chrome25 Bug fix, 100% width causes issues with the date picker, replaced with a fixed width*\/\r\ntable.x-date-inner {\r\n   width:200px !important; \/* original was width : 100% *\/\r\n}<\/pre>\n
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).<\/p>\n
Happy coding!<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-213","post","type-post","status-publish","format-standard","hentry","category-web-development"],"_links":{"self":[{"href":"http:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/posts\/213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/comments?post=213"}],"version-history":[{"count":3,"href":"http:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/posts\/213\/revisions"}],"predecessor-version":[{"id":216,"href":"http:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/posts\/213\/revisions\/216"}],"wp:attachment":[{"href":"http:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/categories?post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.corrspt.com\/blog\/wp-json\/wp\/v2\/tags?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}