I am using the JQM grids for grouping and dividing content. Is there a way to align the content to the bottom of the ui-grid-a or ui-grid-b? I tried many of the proposed solutions to make the ui-block-a and ui-block-b divs the same height, but none of them played nicely together with the JQM grid system.
Below is an example with two flipswitch widgets which have labels of different text lenght. How can I keep the widgets always vertical aligned? (Pure CSS but w/out Flex appreciated)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a">
<label for="flip-checkbox-1">Flip toggle switch with more caption text:</label>
<input data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox">
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-a">
<label for="flip-checkbox-2">Flipswitch 2:</label>
<input data-role="flipswitch" name="flip-checkbox-2" id="flip-checkbox-2" type="checkbox">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
from Bottom alignment of widgets inside ui-grid blocks
No comments:
Post a Comment