3. Two columns with pictures and text on PhoneGap

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Two columns with pictures and text on PhoneGap

  • V

    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 :0_1455188797006_home.jpg

    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 ! :)

    0 1 Reply
  • 侍

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

    0