Search jQuery

jQuery Forum

How can I Make jQM layouts more flexible and reflow page content?

in jQuery Mobile • 8 years ago

Okay, I am new to this forum and using jQuery Mobile. I have a number of queries but right now I am looking for help with two issues.

How To Make jQM layouts more flexible.

I refer to making jQM apps more responsive. The issues I notice are on large screens, list views okay on phones but not scaling to bigger screen widths.

On that, another query. How to reflow page content? I mean use multiple columns on large screens. Hope I make sense. So they stack one below the other on smaller screens.

Any help appreciated like example code or online tools, thanks.

Replies(4)

watusiware

Re: How can I Make jQM layouts more flexible and reflow page content?

8 years ago

The issues I notice are on large screens, list views okay on phones but not scaling to bigger screen widths.

Show us what you mean. We can only guess.

Listviews normally take the entire screen width. This can look awkward on a very wide screen, and so you might want to restrict page width or the width of the listview.

How to reflow page content? I mean use multiple columns on large screens. Hope I make sense. So they stack one below the other on smaller screens.

There's no jQuery Mobile widget for this. But CSS still works. Or maybe you can find some third-party widget.

If you only need to support modern browsers, flex-box CSS provides a pretty nice solution for this.

In the future, you'll be able to use HTML5 Regions, but support is spotty at present.

http://caniuse.com/#feat=css-regions

stevedev

Re: How can I Make jQM layouts more flexible and reflow page content?

8 years ago

Thanks but I figured out how to use multiple columns on large

screens and stack them one below the other on smaller ones. jResponse does this by:

a. Injecting two stylable <div> elements into the standard jQM page layout

b. Providing a selection of grid layout controls that are responsive courtesy of CSS3 styling

and/or JavaScript

It is here if you want to reproduce, http://jresponse.net/index.html

Yes, CSS was the answer but i needed a tool to help.

Shall take a look at flex-box CSS. Thanks.

watusiware

Re: How can I Make jQM layouts more flexible and reflow page content?

8 years ago

Actually, I misspoke - jQuery Mobile does have a "grid" widget. It's something I don't like and don't use, because (at least in the past, not sure about 1.4) it is (was) a clunky, heavy (generates lots of markup) solution. That comes from trying to work on all browsers.

But there's an example in the docs of doing what you want:

http://demos.jquerymobile.com/1.4.4/grids-custom-responsive/

It's easy enough, though, to layout any elements either side-by-side or stacked vertically with a bit of CSS. In fact, the example pages do that. (Oops, they used to, before 1.4!) Take a look at the "quick nav" sidebar in the demo pages. Narrow your browser. Notice that it goes away. In the 1.4 demo, it's then accessible using a panel, but in older demos, it was stacked below the content.

That's just responsive CSS.

I think the page flow module is the holy grail here, but just not implemented in enough browsers yet to actually use. When it's adopted by iOS and Android browsers, you will see the use take off, since now there will be many PhoneGap apps using it (since they don't have to worry about supporting old browsers.)

stevedev

Re: How can I Make jQM layouts more flexible and reflow page content?

8 years ago

Thanks for that insight, I have looked over the page. CSS shows the way, well CSS3.

Top Reply

Response title

Attachments

jQuery Forum

How can I Make jQM layouts more flexible and reflow page content?

Replies(4)

Re: How can I Make jQM layouts more flexible and reflow page content?

Re: How can I Make jQM layouts more flexible and reflow page content?

Re: How can I Make jQM layouts more flexible and reflow page content?

Re: How can I Make jQM layouts more flexible and reflow page content?

Statistics

Tags

Actions