Scrolling and compensating for header/footer in MVC layout

6 posts, 2 answers
  1. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 03 Mar 2015 Link to this post

    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
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 05 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 05 Mar 2015 in reply to Kiril Nikolov Link to this post

    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
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 05 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 05 Mar 2015 in reply to Kiril Nikolov Link to this post

    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).
  7. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 05 Mar 2015 Link to this post

    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

     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready