height issue in mobile view

[Nithin]

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 

 

[Magdalena]

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

[Nithin]

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

[Magdalena]

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

[Nithin]

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

[Tyler]

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.

[Nithin]

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 

[Magdalena]

Hi Nithin,

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

Regards,
Magdalena
Progress Telerik