height issue in mobile view

8 posts, 0 answers
  1. Nithin
    Nithin avatar
    67 posts
    Member since:
    Mar 2018

    Posted 25 Apr 2018 Link to this post

    hi,
    I'm trying create a scheduler which is both compatible in mobile and desktop. The issue I'm facing is when I try it in mobile view the full content doesn't show up .
    Is it something I have done css or  I have to provide height explicitly other than auto height?

    My Example 

     

  2.
  3. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 26 Apr 2018 Link to this post

    Hi Nithin,

    Thank you for the provided resources. I have run the sample, but I am not sure that I have understood you in the right way. I have noticed, that two last columns in the content are not visible in mobile view, but there is a horizontal scrollbar for the purpose. Could you please elaborate the question and describe in more details what is the expectation? Looking forward to your reply.

    Regards,
    Magdalena
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Nithin
    Nithin avatar
    67 posts
    Member since:
    Mar 2018

    Posted 27 Apr 2018 in reply to Magdalena Link to this post

    Hi Magdalena,
    The issue I'm facing is when the scheduler is on mobile view the resources I'm having currently is about 11 rooms but in the mobile view it shows only 3 rooms in landscape and 10 on portrait out of the 11 rooms. So I was wondering if it was an css issue or something that I did incorrectly.

    PS: please do reload the page when in mobile view and try the scroll issue
  7. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 30 Apr 2018 Link to this post

    Hello Nithin,

    Thank you for the clarification. I have logged the issue for fixing and updated your Telerik points for reporting the bug as a point of gratitude. For now, you can use the following preliminary workaround:
    .k-scheduler-mobile {
        overflow: auto;
    }

    I would like to apologize for any inconvenience caused.


    Regards,
    Magdalena
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8.
  9. Nithin
    Nithin avatar
    67 posts
    Member since:
    Mar 2018

    Posted 30 Apr 2018 in reply to Magdalena Link to this post

    Hi Magdalena,
    Thanks for the info and the css but it doesn't completely solve my issue please take a look at this example
    It solve only y-overflow not the x-overflow

    Example

    Thanks
  11. Tyler
    Tyler avatar
    68 posts
    Member since:
    Feb 2017

    Posted 30 Apr 2018 in reply to Nithin Link to this post

    Your '.k-scheduler-header-wrap .k-scheduler-header' and your '.k-scheduler-content .k-scheduler-table' seemed to have a width of 178%. This is going to push them out of view. I am not sure if it is doing this automatically, or you are messing with their widths somewhere in your code. This seems to be why the last few columns are hidden. 

     

    You also have:

    .k-scheduler-content{
        overflow-x: hidden;
    }

     

    This is going to prevent people from scrolling over to see the rest of the cut off columns. overflow-x should be auto.

  13. Nithin
    Nithin avatar
    67 posts
    Member since:
    Mar 2018

    Posted 01 May 2018 in reply to Tyler Link to this post

    Hi Tyler,
    Thanks for pointing out the css error with

    .k-scheduler-content{
        overflow-x: hidden;
    }

    yes I have removed it and now it works fine.

    As for the css ".k-scheduler-header-wrap .k-scheduler-header' and your '.k-scheduler-content .k-scheduler-table' seemed to have a width of 178%" which is auto generated I think.

    Thanks 

  14.
  15. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 02 May 2018 Link to this post

    Hi Nithin,

    Yes, the width of the mentioned elements is calculated by inbuilt Kendo JavaScript.

    Regards,
    Magdalena
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top