Scrolling and compensating for header/footer in MVC layout

[Bil]

Hi guys,

I have a MVC project where I'm using a bootstrap navbar in the header and Kendo MobileTabStrip in the footer for my MobileLayout. On pages I'm using the MobileView wrapper around my content but the problem is that the bottom part of the content is only visible when you drag the screen up, it's not visible without dragging and holding the page.

For example I have a page with a button at the bottom and defined something like this in my razor view:

@(Html.Kendo().MobileView()
.Name("Content1")
.Content(@<text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt sollicitudin libero. Suspendisse ultrices volutpat dignissim. Vestibulum euismod tempor nisi eu porttitor. Suspendisse odio ligula, sagittis eu ultricies vel, maximus sit amet massa. Quisque ultrices rhoncus dignissim. Vivamus tristique arcu vitae eros pretium auctor.
@(Html.Kendo().MobileButton().Name("Button1").Text("Hello World"))
</text>)

The _Layout.cshtml page for this would be something like this:

@(Html.Kendo().MobileLayout()
.Name("Layout1")
.Header(@<text>
<!-- bootstrap navbar -->
</text>)
.Footer(@<text>
@(Html.Kendo().MobileTabStrip().Items(items =>
{
items.Add().Text("Home");
items.Add().Text("Contact Us");
items.Add().Text("About");
}
))
</text>)

 
So the text scrolls and you can scroll it on a device, but the button isn't visible by default so the user can't access it. It's there if you drag the screen up enough, but its like the scroller is a fixed size and not compensating for the height of the header (50px) and the tabstrip.

Thanks

[Kiril Nikolov]

Hello Bil,

Using Bootstrap components in a mobile application is not supported. The problem comes from the sizing done via flex boxes in the mobile application. Therefore the behavior that you observe is expected and I am afraid that there is no workaround for it.

Regards,
Kiril Nikolov
Telerik

 

 

[Bil]

Thanks for the answer Kiril, that makes sense.

I can't seem to find a good end-to-end MVC Kendo Mobile app example. Sure there are bits and pieces of controls but nothing that pulls it all together and the default app you get using the Visual Studio template is good but doesn't contain any forms for example. Is there such a thing?

Thanks

[Kiril Nikolov]

Hello Bil,

You are right there there is no forms example with the MVC wrappers, however you should be able to adapt the following one pretty easily:

http://demos.telerik.com/kendo-ui/mobile-forms/index

Regards,
Kiril Nikolov
Telerik

 

 

[Bil]

Great, that helps a lot (p.s. someone should make a MVC helper version of this, the MVC helper documentation/examples is a little thin).

[Kiril Nikolov]

Hello Bil,

I agree that we are thin on MVC mobile example, this is why I created the forms demo in MVC for you. Hope it helps.

Regards,

Kiril Nikolov

Telerik