ListView/Scroller setting height by % not px

2 posts, 0 answers
  1. Mark
    Mark avatar
    25 posts
    Member since:
    Dec 2013

    Posted 25 Jul 2014 Link to this post

    Is it possible to set height for the scroller to be a percentage instead of hard coded pixels or ems?  There are so many screen sizes that using a percentage for height makes it easy to adapt for different sizes without having to manually get the window height, and then do a conversion on the height I want and apply it.



    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <link href="styles/kendo.common.min.css" rel="stylesheet" />
            <link href="styles/kendo.default.min.css" rel="stylesheet" />
            <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <link href="styles/Custom/GeneralStyles.css" rel="stylesheet" />
            <script src="js/jquery.min.js"></script>
            <script src="js/kendo.all.min.js"></script>

            <title>KonnexMe</title>
        </head>
        <body>
              <!--Main View-->
            <div data-role="view" data-layout="layout" id="viewHome">
                
                <div class="flex">
                    <div>
                        <div data-role="scroller" 
                             style="height: 320px; width: 98%; margin-left: .3em; box-shadow: 5px 5px 10px #888888; overflow-x:hidden !important;">
                            <ul id="notesHome" 
                                data-role="listview" 
                                data-type="group" 
                                data-fixed-headers="true">
                                <li>
                                    Notes
                                    <ul>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div>
                        <div data-role="scroller" 
                             style="height: 320px; width: 98%; box-shadow: 5px 5px 10px #888888;">
                            <div>
                                <ul id="tasksHome"
                                    data-role="listview"
                                    data-type="group"
                                    data-fixed-headers="true">
                                    <li>
                                        Tasks
                                        <ul>
                                            <li>Tasks</li>
                                            <li>Two</li>
                                            <li>Three</li>
                                            <li>Four</li>
                                            <li>One</li>
                                            <li>Two</li>
                                            <li>Three</li>
                                            <li>Four</li>
                                            <li>One</li>
                                            <li>Two</li>
                                            <li>Three</li>
                                            <li>Four</li>
                                            <li>One</li>
                                            <li>Two</li>
                                            <li>Three</li>
                                            <li>Four</li>
                                            <li>One</li>
                                            <li>Two</li>
                                            <li>Three</li>
                                            <li>Four</li>
                                            <li>One</li>
                                            <li>Two</li>
                                            <li>Three</li>
                                            <li>Four</li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex">
                    <div id="activitesHome">
                        <div data-role="scroller"
                             style="height: 320px; width: 98%; margin-left: .3em; margin-top: .5em; box-shadow: 5px 5px 10px #888888; overflow-x:hidden !important;">
                            <div data-role="scheduler"></div>
                        </div>
                    </div>
                    <div>
                        <div data-role="scroller"
                             style="height: 320px; width: 98%; margin-top: .5em; box-shadow: 5px 5px 10px #888888;">
                            <ul id="alertsHome"
                                data-role="listview"
                                data-type="group"
                                data-fixed-headers="true">
                                <li>
                                    Alerts
                                    <ul>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                        <li>One</li>
                                        <li>Two</li>
                                        <li>Three</li>
                                        <li>Four</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
            

            

            <!--Main View Drawer-->
            <div id="drawerHome"
                 data-role="drawer"
                 data-views="['viewHome']">
                <ul data-role="listview" data-style="inset">
                    <li><a>Accounts</a></li>
                    <li><a>Calendar</a></li>
                    <li><a>Company</a></li>
                    <li><a>Correspondence</a></li>
                    <li><a>Documents</a></li>
                    <li><a>People</a></li>
                    <li><a>Reports</a></li>

                    <li><img src="" style="height: 10em; margin-left: 1.6em;"></li>

                    <li><a>Change UI Theme</a></li>
                    <li><a data-transition="none">About</a></li>
                    <li><a href="/views/Logout.html" data-transition="none" data-target="paneMain">Logout</a></li>
                </ul>
            </div>
            
            
            

            <!--Global Layout-->
            <div data-role="layout" data-id="layout">
                <header data-role="header">
                    <div data-role="navbar">
                        <a data-role="button" data-rel="drawer" href="#drawerHome" data-icon="drawer-button" data-align="left"></a>
                        <span data-role="view-title">Sample</span>
                    </div>
                </header>

                <footer data-role="footer">
                    <div data-role="tabstrip">
                        <a data-icon="contacts">Profile</a>
                        <a data-icon="settings">Settings</a>
                    </div>
                </footer>
            </div>
                
            
            <style>
                .flex {
                    display: flex;
                    flex-direction: row;
                }

                .flex > div {
                    flex: 1 1;
                }
            </style>

            <script>
                var app = new kendo.mobile.Application(document.body);
            </script>
        </body>
    </html>
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 29 Jul 2014 Link to this post

    Hello Mark,

    Percentage height cannot be set on a ListView scroller wrapper as it requires its parent elements to be in fixed height, so it can correctly size. However you can use CSS flexboxes that will automatically resize based on the screen height as shown in this example:

    http://jsbin.com/nicom/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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top