Aboslute Position doesn't work on device with kendo.mobile.all.css

3 posts, 0 answers
  1. Matt
    Matt avatar
    12 posts
    Member since:
    Jun 2013

    Posted 05 Nov 2013 Link to this post

    I'm trying to have a list along the left side of the screen and content along the right.  I tried using the SplitView but I want a header that spans the enter width of the document.  I have everything working on the Icenium simulator, but when I test it on the device the list (absolute positioned content) doesn't show up.

    Since it's on the device, I can't debut the HTML/CSS myself.  Any ideas?

    <!DOCTYPE html>
     
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
             
            <link rel="stylesheet" href="css/kendo.mobile.all.css" />
            <script src="js/jquery.min.js"></script>
            <script src="js/kendo.mobile.js"></script>
            <title>Hello World</title>
        </head>
        <body>
            <div id="viewEventList" data-role="view">
                   <div data-role="header" style="background-color: #FFFFFF;">
                        <div data-role="navbar" style="padding-top: 10px;">
                              Test
                        </div>
                   </div>
     
                   <div>
                        <div data-role="scroller" style="position: absolute; top: 0px; left: 0px; bottom: 0px; width: 245px;">
                             <div>
                                  <div style="border: 1px solid #000000; border-bottom: 3px; margin: 15px; background-color: #FFFFFF;">
                                      <!-- Repeat until too many for screen to handle -->
                                       <div style="border-bottom: solid 1px #000000; padding: 5px;">
                                            Item
                                       </div>
                                  </div>
                             </div>
                        </div>
                   </div>
              </div>
     
            <script>
                var app = new kendo.mobile.Application();
            </script>
        </body>
    </html>
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 06 Nov 2013 Link to this post

    Hi Matt,

    The problem comes from the fact that Kendo UI Mobile uses CSS flexboxes to format its contents. So in your case when you are setting position absolute for elements without height they are not positioned correctly. This is why you need to set height of the elements in order to be displayed correctly. Please check the following example:

    http://jsbin.com/utOmerU/2/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!
  3. Matt
    Matt avatar
    12 posts
    Member since:
    Jun 2013

    Posted 07 Nov 2013 Link to this post

    Perfect thank you for the clarification.
Back to Top