CODEWITHSUNDEEP
cssjquery-mobilejquery-mobile-grid
user1692333
user1692333

Reputation: 2597

How to center JQM grid?

So is it possible to center grid in jQuery mobile. For example i have this http://jsfiddle.net/nonamez/Pr8pa/

<div class="ui-grid-d">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
    <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
</div>

And it looks like enter image description here

Upvotes: 1

Views: 199

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Solution

Working example: http://jsfiddle.net/Gajotres/BFfWc/

Change:

<div class="ui-grid-d">

To:

<div class="ui-grid-c">

HTML :

<div class="ui-grid-c">
    <div class="ui-block-a"><div style="height:60px" class="ui-bar ui-bar-e">A</div></div>
    <div class="ui-block-b"><div style="height:60px" class="ui-bar ui-bar-e">B</div></div>
    <div class="ui-block-c"><div style="height:60px" class="ui-bar ui-bar-e">C</div></div>
    <div class="ui-block-d"><div style="height:60px" class="ui-bar ui-bar-e">C</div></div>
    <div class="ui-block-a"><div style="height:60px" class="ui-bar ui-bar-e">A</div></div>
    <div class="ui-block-b"><div style="height:60px" class="ui-bar ui-bar-e">B</div></div>
    <div class="ui-block-c"><div style="height:60px" class="ui-bar ui-bar-e">C</div></div>
    <div class="ui-block-a"><div style="height:60px" class="ui-bar ui-bar-e">A</div></div>
    <div class="ui-block-b"><div style="height:60px" class="ui-bar ui-bar-e">B</div></div>
    <div class="ui-block-c"><div style="height:60px" class="ui-bar ui-bar-e">C</div></div>
</div>

Upvotes: 1

Related Questions