Auto width for jQuery UI datepicker not working in IE7

Question

I want to use the datepicker gadget for different languages, where some languages might have more characters for week names and some (like english) will have only 3 characters for short week names ie dayNamesMin.

As you seee above, except IE7, width adjusts automatically with

.ui-datepicker {width: auto;} 

in most of the other browsers.

Has anybody faced this problem ? Any good suggestion to fix ie7 width problem ?

Answer 1

The following seemed to do the trick (but I am not sure):

.ui-datepicker {
    width: auto;
    padding-top: 2.6em;
}
.ui-datepicker .ui-datepicker-header {
    position: absolute;
    top: 0.2em;
    left: 0.2em;
    right: 0.2em;
}
.ui-datepicker table {
    width: auto;
}

I have:

• Made the outermost div auto width (to override hard-coded width)
  • And added top padding (see below)
• Made the header absolute positioned since
  • Neither 100% nor auto width worked in IE7 (under given conditions) so used left: 0 + right: 0
  • The top padding occupies the room needed for the header
• The table is set to auto width as 100% does not seem to work in IE7 (under given conditions)

Code here / Demo here