Two columns with pictures and text on PhoneGap

Viinz

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="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="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 !

munsterlander

@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?

Two columns with pictures and text on PhoneGap browsing