CODEWITHSUNDEEP
cssjquery-mobile
Kern Elliott
Kern Elliott

Reputation: 1659

Using percentages to manipulate height of divs jQuery Mobile

I want to create a content page in jQuery mobile in which I have 2 divs one on top the other within the content area in jquery mobile. The issue is that when the screen size changes the lower div goes on top of the upper div. What I want is that when the screen size changes it maintains the same div structure of one on top the other. I am wondering if I can use a grid but am not sure grids work for 1 column but 2 rows?

My code is below:

CSS

 #songName {
    text-align:center;
    width: 100%;
    height: 20px;
}

#songPicture {
    text-align:center;
    width: 100%;
    height: 50%;
}

HTML

<div data-role="content" style="height: 100%">
    <div id="songName"></div>
    <div id="songPicture"></div>
</div>

Please note the content of the divs comes from JSON and while the id songName is plain text the id songPicture content looks like this :

<img src='"image url+"' style='position: absolute; left: 50%; margin-left: -128px; top: 50%; margin-top: -171px; width: 256px; height: 256px;' />

Upvotes: 2

Views: 1164

Answers (1)

Omar
Omar

Reputation: 31732

Use ui-grid-solo class for each div.

<div class='ui-grid-solo'>
 Contents 
</div>

Reference: http://jquerymobile.com/demos/1.2.0-beta.1/docs/content/content-grids.html

Upvotes: 1

Related Questions