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>
<!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>
1 Answer, 1 is accepted
0
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
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!