CODEWITHSUNDEEP
javascriptjquerycssjquery-mobile
user1874538
user1874538

Reputation: 262

Jquery Mobile ui-grid

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>

Upvotes: 1

Views: 655

Answers (1)

user1874538
user1874538

Reputation: 262

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

Upvotes: 1

Related Questions