Non-fixed footer

6 posts, 0 answers
  1. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 21 Aug 2013 Link to this post

    We are using the ASP.NET MVC wrappers for KendoUI Mobile.

    Is it possible to have a non-fixed footer for my Views? I tried setting the .Footer() of our MobileLayout, but of course, that fixes the footer to the bottom of the screen.

    But what we want is just a simple blurb at the bottom of each View, but it shouldn't be fixed, since the info shouldn't be visible at all times.

    I also tried hooking into the "BeforeShow" event of each View to an appendBodyFooter(e) function, which would add a simple <div> element to the $(e.view.element), but for whatever reason, this new div also got stuck to the bottom of the screen! I couldn't find any CSS that was causing the new div to stick, so I'm guessing Kendo must have done it via JS somehow.

    Is there any way to have a simple footer at the bottom of each View that is not fixed on the screen?
  2. Kelly
    Kelly avatar
    28 posts
    Member since:
    Oct 2012

    Posted 22 Aug 2013 Link to this post

    My team was able to create a floating footer by creating another view. We weren't fully kendo in our mobile site at this point but I'm pretty sure this idea will still work if you are.

    <div id="mainview">
    </div>
     
    <div id="floatingview" style="position:fixed;bottom:0px">
    </div>
  3. Kendo UI is VS 2017 Ready
  4. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 26 Aug 2013 Link to this post

    Paul, that is just another fixed element, right? As described in my original post, we need a non-fixed footer.

    Kendo Reps: is there a way to have a non-fixed footer that appears at the bottom of every view?
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 28 Aug 2013 Link to this post

    Hi John,

    I am not sure that I understand exactly what you are trying to achieve. But please take a look at this demo and tell me if this helps.

    http://jsbin.com/edAMezu/1/edit
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 28 Aug 2013 Link to this post

    I apologize if I wasn't clear.

    Here is an example of what we need:  http://jsbin.com/oDiWuGE/1/edit

    We are essentially wanting a footer, like the kind of footer that appears on normal desktop websites. The kind of footer that is only visible at the very end of every web page. We don't want it fixed to the bottom of the window; it just needs to be at the bottom of all the content in the View. So once you scroll to the bottom of the content, the Footer should be there.

    Is there any way to include that kind of Footer on every page?
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 30 Aug 2013 Link to this post

    Hello John,

    Setting a non-fixed footer in the layout of the mobile application is not supported functionality. This is why you will need to put the footer in every view right before the closing </div> tag of the view. 

    I have changed the example a little bit here:

    http://jsbin.com/oDiWuGE/6/edit

    I want to stress on the fact that if you want to put a border on the footer you will need to use box-sizing: border-box; in your css, as otherwise the horizontal scrolling in your application will be broken, as setting the width to 100% and then applying border gets the footer outside of its container.

    I hope this information helps.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready