Two columns with pictures and text on PhoneGap
-
Hi !
I’m creating an app which need to create a grid with many pictures by two columns. If I want to put two pictures on one row it’s ok but if I want to add more content, it’s in two rows.
I want something like this :
Here is my code :
index.html<html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/font_awesome/css/font-awesome" /> <link rel="stylesheet" type="text/css" href="css/onsen-css-components" /> </head> <body> <!-- <ons-page> <h3>Equally spaced</h3> --> <ons-row class="row ons-row-inner"> <ons-col class="col ons-col-inner"> <img src="![plantronics-backbeat-pro_08d88980caba8084_300x300.jpg](http://img1.lesnumeriques.com/produits/190/21897/plantronics-backbeat-pro_08d88980caba8084_300x300.jpg") style="height: 20%; width: 20%;"/> <span class="glyphicon glyphicon-star bigStarBlue" aria-hidden="true" /> <span class="glyphicon glyphicon-star bigStarBlue" aria-hidden="true" /> <span class="glyphicon glyphicon-star bigStarBlue" aria-hidden="true" /> <span class="glyphicon glyphicon-star bigStarBlue" aria-hidden="true" /> <span class="glyphicon glyphicon-star-empty bigStarBlue" aria-hidden="true" /> <br /> <span class="glyphicon glyphicon-star smallStarYellow" aria-hidden="true" /> <span class="glyphicon glyphicon-star smallStarYellow" aria-hidden="true" /> <span class="glyphicon glyphicon-star smallStarYellow" aria-hidden="true" /> <span class="glyphicon glyphicon-star smallStarYellow" aria-hidden="true" /> <span class="glyphicon glyphicon-star-empty smallStarYellow" aria-hidden="true" /> </ons-col> <ons-col class="col ons-col-inner"> <img src="![plantronics-backbeat-pro_08d88980caba8084_300x300.jpg](http://img1.lesnumeriques.com/produits/190/21897/plantronics-backbeat-pro_08d88980caba8084_300x300.jpg") style="height: 20%; width: 20%;" /> </ons-col> </ons-row> <p></p> <script type="text/javascript" src="js.onsenui.js"></script> <script type="text/javascript" src="js/onsenui_all.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> <script type="text/javascript"> ons.bootstrap(); </script> <!-- </ons-page> --> </body> </html>index.css
* { -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ } body { -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ background-color:#E4E4E4; background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0, #A7A7A7), color-stop(0.51, #E4E4E4) ); background-attachment:fixed; font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; font-size:12px; height:100%; margin:0px; padding:0px; text-transform:uppercase; width:100%; } h1 { font-size:24px; font-weight:normal; margin:0px; overflow:visible; padding:0px; text-align:center; } .event { border-radius:4px; -webkit-border-radius:4px; color:#FFFFFF; font-size:12px; margin:0px 30px; padding:2px 0px; } .event.listening { background-color:#333333; display:block; } .event.received { background-color:#4B946A; display:none; } @keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } @-webkit-keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } .blink { animation:fade 3000ms infinite; -webkit-animation:fade 3000ms infinite; } .bigStarBlue{ color: #2196F3; font-size: 20px; } .smallStarYellow{ color: #FFCC00; }Thank you for your help ! :)
-
@Viinz Are you asking how to dynamically add rows with content? If so, the easiest way is as follows:
var onsItem= document.createElement('ons-list-item'); onsItem.setAttribute('modifier', "chevron"); onsItem.setAttribute('onclick', "functionName()"); onsItem.innerHTML = '<img src="" alt="something here" />'; document.getElementById('divIDorSomething').appendChild(onsItem);If this isn’t what you seek, could you clarify your question?
