1

Just a quick jQuery Mobile question.

I am working with ui-grid-a (for the basic case of 50/50 split) and I can populate and render the grid without issue. However in some cases there are fewer items than the content size and I was curious if it was possible to have the grid not wrap the content, but instead fill the available space in the div.

I have tried a few different methods.

1) Basic configuration no modification- the ui-grid seems to wrap the content inspection shows the height on the data-role=content is much smaller than the page. Thus the grid is "filling" the content.

2) As a result I then worked to expand the content. Using some JS fiddle code (below) I was able to set a height to the content (and inspection confirmed this) however the grid remains only a fraction of the content area

jQuery code in .ready() to adjust the content size to fill page

var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);

3) I tried binding this to the page load thinking that maybe the grid was calculated before the Javascript on ready fired. But no luck.

Any suggestions would be very welcome. I am not restricted to jQuery, I've tried many CSS options however those styles don't seem to help when using the custom jQuery Mobile UI (Content/Page)

Thank you in advance,

As requested a sample markup mirroring my own (I have some addition divs within this that are popups, but this represents the main content)

<div data-role="page" id="home" data-theme="b">

    <div data-role="header">
        <h1>Home</h1>
    </div>

    <div data-role="content">

        <div class="ui-grid-a">
            <div class="ui-block-a">
                <a href="#" data-role="button">Test</a>
            </div>
            <div class="ui-block-b">
                <a href="#" data-role="button">Test</a>
            </div>

            <div class="ui-block-a">
                <a href="#" data-role="button">Test</a>
            </div>
            <div class="ui-block-b">
                <a href="#" data-role="button">Test</a>
            </div>

            <div class="ui-block-a">
                <a href="#" data-role="button">Test</a>
            </div>
            <div class="ui-block-b">
                <a href="#" data-role="button">Test</a>
            </div>
        </div>
</div>
</div>
user1874538
  • 262
  • 2
  • 15
  • you shouldn't use `.ready()` to set content's height, because elements within content div aren't visible at the time, hence, their heights aren't defined. check [this](http://stackoverflow.com/a/23764993/1771795) and [this](http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/). – Omar Aug 05 '14 at 16:07
  • Hi, thanks for the quick response, and good point about DOM load sequence. However if you look at the second link you sent you can see that the items do not distribute vertically as well (I am aware they are individual and thats a different issue) but it makes the point that the UI-grid wraps the convent and doesn't expand to fill the content. The first link does this by using a background image, but the same 100% styling does not apply to UI elements. Any suggestions for the grid? – user1874538 Aug 05 '14 at 16:38
  • Are you wrapping your content div in `ui-grid-a`? Can you post your html markup. – Omar Aug 05 '14 at 16:43
  • See Update above - Also I would be more than happy to get rid of the jquery i posted originally, it is annoying as it modifies the size of other items such as popups (which would mean I need to subclass the selector) – user1874538 Aug 05 '14 at 17:07
  • You want to enlarge grids to fill content div? Popup divs should be outside any div, they should be placed under page div. btw, the code above is mine, it's general, you just need to change selector `$(".ui-content").height()` when you pally new height value :) – Omar Aug 05 '14 at 18:46
  • The goal is to extend the grid to be the full page height. I don't have any preference as to how that is done, either with ui-content changes in jquery or by another method. If you look at the example code I posed in jsfiddle you can see that the grid items don't fill the full page only wrapped the content buttons – user1874538 Aug 05 '14 at 19:01
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58733/discussion-between-omar-and-user1874538). – Omar Aug 05 '14 at 22:47
  • @Omar sorry to bother you, just wanted to see if you had a chance to look at the code. I posted a response in chat, that changing the 1/3 made no difference. (Details on last page of chat). Thanks again for the help – user1874538 Aug 18 '14 at 13:19
  • Can you provide me with your last jsfiddle attempt? – Omar Aug 18 '14 at 15:24

1 Answers1

1

First I want to give a big thank you to @Omar for his help in creating this solution.

There are a couple of components that factor into this problem. First the page load sequence as to when the element heights are calculated for header and footer and content. To account for this you can bind to the pagebeforecreate event:

$(document).bind("pagebeforecreate", function (e, data) {
    $(document).on("pagecontainertransition", contentHeight);
    $(window).on("throttledresize orientationchange", contentHeight);
});

Now I will discuss how to resize a grid dynamically

Next you must account for the screen size of the device and calculate the appropriate size for each of the row elements using the code

var screen = $.mobile.getScreenHeight();

You must then calculate the size of the content and the size available for that content

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();

var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

From here you can calculate the grid size 

var numRows = 3;
$(".ui-content .ui-block-a .ui-btn,.ui-content .ui-block-b .ui-btn").height((content / numRows) - 32);

}

Next as you may have more than one grid

In this case you can add a descending selector to specify which grid you would like to resize

$("#GridID.ui-content .ui-block-a .ui-btn, #GridID.ui-content .ui-block-b .ui-btn").height((content / numRows) - 32);

Finally since this event binds to page only once you have to resize all grids at the same time, however the grids may be on different pages and you must select those sizes as each page may have different sizes of content

var header = $("#pageID .ui-header").hasClass("ui-header-fixed") ? $("#pageID .ui-header").outerHeight() - 1 : $("#pageID .ui-header").outerHeight();

var footer = $("#pageID .ui-footer").hasClass("ui-footer-fixed") ? $("#pageID .ui-footer").outerHeight() - 1 : $("#pageID .ui-footer").outerHeight();

var contentCurrent = $("#pageID .ui-content").outerHeight() - $("#pageID .ui-content").height();

var content = screen - header - footer - contentCurrent;

Here is a fiddle to demonstrate the full functionality http://jsfiddle.net/m6bbbpg1/

Hopefully this will help someone else as this seems to be a fairly common task when creating generic mobile webpages

user1874538
  • 262
  • 2
  • 15