I've noticed there's a small visual issue occurring while using the date picker when going up (clicking on the month name, clicking on the year number) or going down (clicking on the selected year, clicking on the selected month).
When you go up or down a level, the elements in opened window starts off at a size which is slightly larger than what it should be when it finishes loading, so then when the widget finishes loading, it "jumps" to thesmaller size.
This currently happens on all styling, but its the most pronounced when using the material theme (e.g. using the bootstrap theme will make the elements jump very slightly towards the bottom).
Is there a way to stop this from happening?
Thanks
7 Answers, 1 is accepted
The described effect is caused by a padding style. We will remove it for future Kendo UI versions, and in the meantime, you can override the Kendo UI CSS with...
div.k-calendar { padding: 0;}By the way, I observed the issue in the following themes only - Fiori, Material, Nova. The others work OK:
http://demos.telerik.com/kendo-ui/calendar/index
Let me know if your observations on the above demo are different.
Regards,
Dimo
Telerik
Rank 1
Hi Dimo
That seems to have fixed the initial issue i was asking about regarding the padding, but theres still the issue of going from a daily view to the monthly view (and vice versa). The daily view's height is greater than the monthly view and due to this, going from the daily to monthly will cause the screen to become smaller. Also happens if you go to the yearly views as this height is again bigger than the monthlys.
I have tried the controls on both Chrome and Firefox (using the demo page you've linked) and can see it happening.
Also i should mention this is for the material theme.
With the bootstrap theme, going from the daily to monthly calendar (and vice versa) causes the screen to slightly move upwards - also happening on Chrome and Firefox.
Thanks
The height difference between month and dya views is by design in the Material theme - notice that the hover state is round, while the number of rows in the two views is different. There is no other way to achieve this scenario with identical container heights, because the elements' heights (and consequently the hover state) will not be correct any more.
I was not able to reproduce the screen-moving-upwards issue - here is a video, let me know if I am missing something.
http://screencast.com/t/9D0lSuJfWX
Regards,
Dimo
Telerik
Rank 1
Hi Dimo,
Interesting to note that the above method was the solution to the resizing issue, wouldn't it be better to make the monthly icons to be bigger so they take the same size as when its showing the daily view? That way you won't be getting the jumpy resize that you see currently. Or a less acceptable approach could be to fluidly resize the container using animations (although a static size would be the best). Are there any plans in implementing something like the above?
And also its very strange to see your screen not getting the same issues with the boot strap theme as i see it on my machine. It shows a small (maybe 1-2px) jump when the screen is loaded. But i guess for now that's irrelevant as i'm using the material theme.
Thanks.
I assume that by "monthly icons" you imply the month names. If we make them higher in the Material theme, this will also make them wider (to preserve their round shape), so the Calendar will expand and shrink horizontally, instead of vertically. We don't think this will be a better behavior.
Regards,
Dimo
Telerik
Rank 1
Hi Dimo
I get what you mean, although what i was suggesting was a bit different from your suggestion (no need to resize the icons at all - just add paddings to the vertical component).
I have attached an image file which I hope will explain better.
Thanks
I will forward your suggestion to our designers for consideration.
Regards,
Dimo
Telerik