Datepicker causing table width to expand on IE6
Hello,
I have found a very strange problem. I have a datepicker in an input and few tables in my page. All the tables are set to width 100% so if they aren't too wide, they will reach the border of the window. One table has a lot of columns and therefore the width will cross the window border (even if its width is 100%).
When I click on the input to open the datepicker, it pops up fine but all the tables widths are expanded automatically to the widest table width (the one which is wider than a screen) so that all tables will be wider than a screen even if they don't really require it. Then it doesn't revert to its original width when the datepicker is closed.
The problem happens when the zoom property is applied to the div containing the table. If the zoom property isn't applied, then the problem doesn't happen.
The issue is that I need to apply the zoom property in IE in order to fix other layout problems.
I found two workarounds which aren't really nice, therefore, I'd like to see if this can be fixed in jQuery :
- set the table width to a number of pixels rather than a percentage
- set the table left or right margin to a positive number of pixel
I saw this issue only on IE6, works fine on IE8 and FF3.
Please note that when I click on an input button that triggers a jQuery ajax event, the table width automatically rolls back to the original good value thus fixing the problem.