jquery mobile - phonegap cordova menu grid -
I am developing a mobile app using PhoneGrap / Cordova. I want my main menu to be a set of icons with a short text below, combine all the grid layouts (for example 2 lines x 3 columns). I am also using jquerymobile for my "page" I have a fixed "header" and "footer" area and "content" is currently:
gt; & Lt; Img src = "./img / menu1.png" & gt; & Lt; / P & gt; & Lt; H2 & gt; OPT1 & lt; / H2 & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "ui-block-b" & gt; & Lt; Div class = "ui-bar ui-bar-a" & gt; & Lt; A href = "#"> gt; & Lt; Img src = "./img / menu2.png" & gt; & Lt; / P & gt; & Lt; H2 & gt; OPT2 & lt; / H2 & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "ui-block-c" & gt; & Lt; Div class = "ui-bar ui-bar-a" & gt; & Lt; A href = "#"> gt; & Lt; Img src = "./img / menu3.png" & gt; & Lt; / P & gt; & Lt; H2 & gt; OPT3 & lt; / H2 & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "ui-block-a" & gt; & Lt; Div class = "ui-bar ui-bar-a" & gt; & Lt; A href = "#"> gt; & Lt; Img src = "./img/ menu4.png" & gt; & Lt; / P & gt; & Lt; H2 & gt; OPT4 & lt; / H2 & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "ui-block-b" & gt; & Lt; Div class = "ui-bar ui-bar-a" & gt; & Lt; A href = "#"> gt; & Lt; Img src = "./img / menu5.png" & gt; & Lt; / P & gt; & Lt; H2 & gt; OPT5 & lt; / H2 & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "ui-block-c" & gt; & Lt; Div class = "ui-bar ui-bar-a" & gt; & Lt; A href = "#"> gt; & Lt; Img src = "./img / menu6.png" & gt; & Lt; / P & gt; & Lt; H2 & gt; OPT6 & lt; / H2 & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;
I want the grid height to be equal to the "content" height, or by adjusting the grid's overall height or by adjusting the height of the rows I do not want to define a certain height because it The menu should be adjusted in different screen sizes. (Well the height can be a number if some JS can change it accordingly)
There are some ways of the web but I can not find anyone who adjusts the automatic height here :
Solutions can be done in any way ... CSS, JS, etc ...
Many thanks for any suggestions!
Cheers!
Comments
Post a Comment