How do I make a grid responsive using the ui-responsive class defined at the bottom of this page?
http://api.jquerymobile.com/responsiv...
I adding a grid and setting the class property to ui-responsive, but it doesn't seem to work when I change the size of the screen in Appery.io test.
I tried with a 3 col grid with 2 rows.
I expected them to go vertical on the phone, but show as 3 columns on tablet. See attached screenshots.
Thanks,
Don
Hello! Please post the CSS you used for responsive grid.
not using css. The JQM link above (near bottom of that page) says you just have to add a class ui-responsive to the grid.
I added this to the class on the properties.
I didn't try their custom CSS option. I was just trying ui-responsive class default.
I also tried their custom CSS recommendation, but that isn't working either.
I added the my-breakpoint to the class name too.
Neither seem to make the grid responsive. (unless I have to test this on the actual device.)
code
@media all and (max-width: 50em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float:none;
}
}
/code
Appery.io Grid component is a table, but the Grid exposed here http://api.jquerymobile.com/responsiv... is a nested div. So you can't use this style for Appery.io Grid, but you can try to create table through JS or HTML panel as shown here http://api.jquerymobile.com/grid-layout/. This way you can apply ui-responsive class.
I also tested it on my iPhone and it didn't adjust to single column.
This code below works fine outside of Appery.io. But, if I look into Appery's generated code in the element inspector, I see that it creates a table, instead of nested divs, to make the grid. That may be why it doesn't work. No idea, just a thought.
Don
code
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive-grid demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style>
@media all and (max-width: 35em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float:none;
}
}
</style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Responsive Grid Example</h1>
</div>
<div data-role="content">
<div class="ui-grid-b my-breakpoint">
<div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
<div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
<div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
</div>
</div>
</body>
</html>
/code
You're absolutely right, see my comment above.
Sorry. I assumed Appery Grid was a JQueryMobile grid. my bad.
http://api.jquerymobile.com/grid-layout/
Hopefully you will be adding this capability in the future.
Using Panel is fine backup, but then I can't leverage your design builder for the components inside it.
Thanks,
Don