Date picker elements jumpy when drilling up and down

8 posts, 0 answers
  1. Jaesoon
    Jaesoon avatar
    51 posts
    Member since:
    Oct 2012

    Posted 09 Jan Link to this post

    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

  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 13 Jan Link to this post

    Hello Jaesoon,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jaesoon
    Jaesoon avatar
    51 posts
    Member since:
    Oct 2012

    Posted 14 Jan in reply to Dimo Link to this post

    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

  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 18 Jan Link to this post

    Hi Jaesoon,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Jaesoon
    Jaesoon avatar
    51 posts
    Member since:
    Oct 2012

    Posted 18 Jan in reply to Dimo Link to this post

    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.

  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Jan Link to this post

    Hello Jaesoon,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Jaesoon
    Jaesoon avatar
    51 posts
    Member since:
    Oct 2012

    Posted 20 Jan in reply to Dimo Link to this post

    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

  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Jan Link to this post

    Hi Jaesoon,

    I will forward your suggestion to our designers for consideration.

    Regards,
    Dimo
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready