CSS Transition issue

[Thomas]

Dear Telerik Community,

 I've recognized some weird behavior of the DatePickerWidget when switching from one month to another. You can take a look at the screen shot to see exactly what I'm talking about. I don't know if this already came up to somebody of you - I hope it did so someone can help me fix it.

 Kind regards,

Thomas

[Iliana Dyankova]

Hi Thomas,

I tried to reproduce the illustrated issue but to no avail (short screencast capture). Could you please check if there are some custom CSS rules which influence the default Kendo UI DatePicker styling? Also do you observe this problem in a specific browser only or it persists in all major browsers? Also, could you confirm you are using v2015.2 902 (as pointed in the ticket info)? Thank you in advance for your cooperation.

Regards,
Iliana Nikolova
Telerik

[Thomas]

Hey Iliana,
Thanks for your reply. I checked on any custom css rules, but there's no rule which influences  the DatePicker. The Kendo Version used is 2014.3.1119.340. We design our applications IE only. The widget as code looks like follows:

1.@(Html.Kendo().DatePickerFor(model => model.Attribute)
2.                         .Min(DateTime.Today.AddDays(42))
3.                         .Max(DateTime.Today.AddDays(366))
4.                         .Events(e => e.Open("resizeCalendar"))
5.                         .HtmlAttributes(new { style = "width: 100%;  height: 2.13em;", required = "required", validationmessage = "Attribute is required."  })
6.                         )

The resizeCalendar method looks like this:

1.function resizeCalendar() {
2.    var dateViewCalendar = this.dateView.calendar;
3.    if (dateViewCalendar) {
4.        var widthOfWidget = $(this)[0].element.width() + "px";
5.        dateViewCalendar.element.css("width", widthOfWidget);
6.    }
7.}

Many thanks for your help and kind regards.

Thomas

[Iliana Dyankova]

Hi Thomas,

I tested the provided DatePicker configuration with version 2014. however I am still not able to reproduce the issue. Is it possible to send an isolated runnable example (or at least the CSS rules which you are using) - this way I would be able to check what exactly is going wrong and provide concrete recommendations? Once again, thank you for your cooperation.

Regards,
Iliana Nikolova
Telerik

[Thomas]

Thanks for your reply again!
I was able to isolate the problem. The following CSS tag caused the issue:

1.table
2.{
3.    border: solid 1px #e8eef4;
4.    border-collapse: collapse;
5.}

many thanks for your help.

kind regards

Thomas

[Iliana Dyankova]

Hi Thomas,

Thanks for the update - I am glad to hear the issue has been resolved.

Regards,
Iliana Nikolova
Telerik