Jquery Mobile responsive grid question...

GARAGE.IE

Hi folks,

I'm wondering is it possible to use JQM responsive code to move from one grid type (grid B, 2 column 50%-50% type grid) for rendering on an iPhone, to another grid type, say for example grid D, 4 column 25%-25%-25%-25% grid type for when a wider screen such as a desktop or tablet is being used???

I have set up my code to display a menu using images which is 2 columns wide and 4 rows in length, giving an 8 item menu. This displays just as expected on a smartphone, etc, but when I use a bigger device such as a tablet or desktop, I want the menu to not be 2 column but 4 column. I've googled this to death last night and it doesn't seem to be possible using JQM responsive. I had this working before using Bootstrap but had to take out the Bootstrap code as it was conflicting with some of my JQM code so using Bootstrap to do this isn't an option here unfortunately. I'll post my code later, don't have it to hand as I'm posting this...

Thanks for any help with this...

Atomic Pineapple

I think you might need to use CSS Media Queries to achieve this, have you looked into them?

GARAGE.IE

Hi Atomic,

I sure have, the one thing they don't seem to let you do is to step up from a 2 column solution onto a different grid like a 4 grid solution. You can do this in Bootstrap, as far as I can recall, you can specify different grid structures to be used at different screen widths, it seems from JQM that you can't do the same thing. I've tried setting my grid to be a 4 column code first for wider screen widths in my HTML code and letting JQM reduce it for shorter screen sizes like a smartphone but it is "stacking" the menu into a single column which is no use to me, it has to be a 2 column menu for the narrowest screen width.

Atomic Pineapple wrote: »

I think you might need to use CSS Media Queries to achieve this, have you looked into them?

GARAGE.IE

It's a very simple query I have, I want my simple image menu to be a 2 column x 4 row grid below a certain screen width and a 4 column x 2 row grid at all other screen widths, using JQM responsive. I did use Bootstrap before to accomplish this and ran into the mother of all issues with Bootstrap interfering with some other code I was using so I can't use Bootstrap again for this...

Buford T Justice

Bootstrap will do this for you, but if its causing issues then only include the css you need from bootstrp, like the row and the col classes so it doesn't interfere with the rest of your site.

GARAGE.IE

Buford T Justice wrote: »

Bootstrap will do this for you, but if its causing issues then only include the css you need from bootstrp, like the row and the col classes so it doesn't interfere with the rest of your site.

But I'm asking is it possible to deploy the same (fairly simple) functionality, using JQM? I tried pearing Bootstrap down to use Responsive code before and I had such a headache with it messing up buttons and checkboxes, I genuinely don't want to ever go back near it again.

GARAGE.IE

This is basically my HTML code here:

<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">Menu Image 1</div>
<div class="ui-block-b">Menu Image 2</div>

<div class="ui-block-a">Menu Image 3</div>
<div class="ui-block-b">Menu Image 4</div>

<div class="ui-block-a">Menu Image 5</div>
<div class="ui-block-b">Menu Image 6</div>

<div class="ui-block-a">Menu Image 7</div>
<div class="ui-block-b">Menu Image 8</div>
</div><!-- /grid-a -->

This renders a 2 column 4 row grid with my menu images properly arranged, on small screens, iPhones, etc...

However I just want JQM responsive to change this to a 4 column grid when the screen size is above a certain size...

Graham

You're really making work for yourself further down the road with the JQM approach.

You'd be much better offer figuring out the issues you were having with Bootstrap rather than trying to mangle JQM.

GARAGE.IE

Graham wrote: »

You're really making work for yourself further down the road with the JQM approach.

You'd be much better offer figuring out the issues you were having with Bootstrap rather than trying to mangle JQM.

Well I've a whole load of JQM code now so I can't really go back and change it all, at least not for something that is as simple as getting a 2 column grid to render as a 4 column grid above a certain screen width... I can go back to Bootstrap if I absolutely have to but I'd rather stay committed to where I'm at at the mo with the approach that I've taken so far, considering the entirety of the project development work that I've done to date... I've a lot of back end stuff already done that works with my front end, that I don't want to have to go back to and rewrite, just because I can't get JQM responsive to work as I thought it was meant to work?!?

Graham

GARAGE.iE wrote: »

I can't get JQM responsive to work as I thought it was meant to work?!?

On a desktop browser?

GARAGE.IE

Graham wrote: »

On a desktop browser?

I have written the HTML above to render my main menu properly on a smartphone, all is grand there, it just doesn't quite look right as a 2 column menu on wider devices such as tablets, desktops, etc...

GARAGE.IE

Hi folks,

I got this resolved last night using Bootstrap, just out of curiosity, the way you can specify two or more different grid formats in Bootstrap in your HTML code, like for example:

.col-xs-6 .col-md-4

So depending on the type of device and screen size/width, you can tell the browser via your HTML code, which way you want your grid to render, am I correct in saying that this simple solution to a simple problem is not possible with JQM? I'm sure there is a more complicated way of doing it using a media query but I would have thought that it would be a lot easier to control how a grid renders in JQM, given that it is meant to be responsive?

Atomic Pineapple

GARAGE.IE wrote: »

Hi folks,

I got this resolved last night using Bootstrap, just out of curiosity, the way you can specify two or more different grid formats in Bootstrap in your HTML code, like for example:

.col-xs-6 .col-md-4

So depending on the type of device and screen size/width, you can tell the browser via your HTML code, which way you want your grid to render, am I correct in saying that this simple solution to a simple problem is not possible with JQM? I'm sure there is a more complicated way of doing it using a media query but I would have thought that it would be a lot easier to control how a grid renders in JQM, given that it is meant to be responsive?

Its been a while since I used JQM but I can't recall a way of doing it in JQM as easy as it is in BootStrap, I always used media queries, as far as I remember JQM only scaled its elements up and down as the screen size changed and didn't offer any type of grid structure per screen size like BootStrap does. We stopped using JQM for responsive sites over a year ago.