Datepicker under IE8

[Marcus]

Oh sorry please move to datepicker ...


This is not running under IE8, the datepicker pictures are not there (so nothing to click)
under FF 7 its working fine.

<input id="datepickerF" value=""/>
<input id="datepickerT" value=""/>


$(document).ready(function() {
    $("#datepickerF").kendoDatePicker({
                        // defines the start view
                        startView: "year",

                        // defines when the calendar should return date
                        depth: "year",

                        // display month and year in the input
                        format: "MMMM yyyy",
                        change: function(){needChange=true;}
                    });
    $("#datepickerT").kendoDatePicker({
                        // defines the start view
                        startView: "year",

                        // defines when the calendar should return date
                        depth: "year",

                        // display month and year in the input
                        format: "MMMM yyyy",
                        change: function(){needChange=true;}
                    });
....

[Dimo]

Hi Marcus,

The provided code snippet works correctly on my side. Please double-check for Javascript errors in IE8.

Best wishes,
Dimo
the Telerik team

[Marcus]

Ok Thank you ...

Yes I checked, no javascript error and for the tabs it seems like he found the css and so ...?

But the tabs in the looks like this:


In ff like this:



So a complete different look ....

Marcus

[Marcus]

Solved

If I include the example.min.css than it works!! (css flatter effect)

Marcus

[Dimo]

Hello Marcus,

I am not sure this is a solution, because it is still not clear why this file is required. If I were you, I would investigate exactly which CSS rule from the examples CSS matters.

I suspect that you have stumbled upon an IE rendering bug and some hasLayout-related CSS rule in the examples CSS fixes it.

Regards,
Dimo
the Telerik team

[Marcus]

Hi

Thats right ... you absolutly right ...

The code is orignialy from you I dont change it ...

Marcus

[Corey Gaudin]

It appears adding jquery ui css to a page with kendo ui on IE 8 completely blows up the date picker and combobox etc. There must be some CSS property in jquery ui that is forcing problems. I placed Kendo UI's css after jquery UI's but it makes no difference.

[Kavitha]

I did include example.css in file.  But I am still haviing issues.

I could not find the min version of the file though. It should not make any difference if I use the min version or not.

[Corey Gaudin]

Alright, after playing with this, jquery UI css has nothing to do with it. It is caused by any of the Tabs or Panels (Kendo included)! It seems as through the Combobox and DatePicker do not react correctly in IE 8 when placed in a tab. If you simplify where there is a tab and only the datepicker, it seems to work, but with FieldSets and varying divs it appears to not work.

Can you check this and verify it is an error.

[Corey Gaudin]

Figured out the problem with Datepicker and ComboBox not working (not closing correctly) in IE 8.

You must add the CSS: 
html {
    overflow-y: scroll;
}

I stumbled on this from a previous poster saying that example.css fixed his problem and just drilled down each element until it broke again. This was the trick to making the DatePicker open/close correctly (as well as the ComboBox) in IE 8.

UPDATE:
Unfortunately, this breaks more than it fixes ... with my page not reacting right when I have a long list to show (the scroll bars don't show correctly to scroll down). Any ideas on how to fix this with IE 8? It works with every other version (IE7, IE9, Chrome, FF).

UPDATE 2:
Nevermind, apparently I copied over your height for html also from example.css which was completely messing up the vertical scroll bar. After removing the below css rule, everything works as expected.

html { 
     height: 100%;
}

[Kavitha]

But it is already there in example.css. This is the snippet already present there. from 24 - 28 line

html
{
    overflow-y:scroll;
    font:75% arial,helvetica,sans-serif;
}

when I close the app it shows that it has a script error and points to 

(document).ready(function(){jQuery(".best_in_place").best_in_place()});

I do not have this line of code anywhere in my code.

[Corey Gaudin]

Right,

But do you really want all of those extra styles for your own custom Web Application when it is only one rule that is making this work?

[Kavitha]

further it also says   Object doesn't support this property or method and points to this line

(document).ready(function(){jQuery(".best_in_place").best_in_place()});

I do not have this in my code.

[Dimo]

Hi all,

All the information provided already is not very clear for me to reproduce the problem with the DatePicker. If anyone provides a runnable HTML page, I will take a look.

With regard to the "best in place" method, we don't have that either.

Kind regards,
Dimo
the Telerik team