CODEWITHSUNDEEP
jquerycssjquery-uijquery-mobile
Vinod
Vinod

Reputation: 2311

only single image presented in a row when using jQuery mobile grid

  1. I need the two images in a row, but I am only getting one per row.
  2. Can anyone help me how to set the image captions?

Here is my fiddle

HTML

<div class="grid-row" class="ui-grid-a">
  <a href="goTohomePage()" id="other-color" onClick='#'>
    <img src="img/new_application.png" height="100px" width="50px"/>
  </a>
</div>

<div class="grid-row"> 
  <a href="goToInprogressPage()" id="other-color" onClick='#'>
    <img src="img/new_application.png" height="100px" width="50px"/>
  </a>
</div>

<div class="grid-row" class="ui-grid-a">
  <a href="goTocompletedPage()" id="other-color" onClick='#'>
    <img src="img/new_application.png" height="100px" width="50px"/>
  </a>
</div>

<div class="grid-row">
  <a href="#" id="other-color" onClick='#'>
    <img src="img/new_application.png" height="100px" width="50px"/>
  </a>
</div>

CSS

.grid-container {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.grid-row img {
  max-width: 25% !important;
  width: 25% !important;
  padding: 30px;
}

Upvotes: 0

Views: 250

Answers (3)

ezanker
ezanker

Reputation: 24738

You can use the jQuery Mobile GRID classes to do this (http://demos.jquerymobile.com/1.4.3/grids/)

<div class="ui-grid-a grid-container">
    <div class="ui-block-a grid-row">
         <a href="goTohomePage()" id="other-color" onClick='#'><img src="http://lorempixel.com/80/80/food/1/" /></a>
    </div>
    <div class="ui-block-b grid-row">
         <a href="goTohomePage()" id="other-color" onClick='#'><img src="http://lorempixel.com/80/80/food/2/" /></a>
    </div>    
    <div class="ui-block-a grid-row">
         <a href="goTohomePage()" id="other-color" onClick='#'><img src="http://lorempixel.com/80/80/food/3/" /></a>
    </div>
    <div class="ui-block-b grid-row">
         <a href="goTohomePage()" id="other-color" onClick='#'><img src="http://lorempixel.com/80/80/food/4/" /></a>
    </div>
</div>

The ui-grid-a class has 2 columns. Column 1 divs have the class ui-block-a, column 2 has ui-block-b. Then to resize the images nicely, set your CSS to

.grid-row img{
    max-width: 100% !important;
    width: 100% !important;
    padding: 30px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;   
    box-sizing: border-box; 
}

Here is your updated FIDDLE

Upvotes: 1

Basic
Basic

Reputation: 26766

The trick is to float and size the divs, then make the image fit inside it...

        .grid-container 
        {
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
         }

        .grid-row img
        {
            max-width: 25%;
            width: 25%;
            padding: 30px;
            floaT: left;
        }

Fiddle

Note that if you stretch the visible window width, the image will stretch. This is because you're fixing the height in html (and width too but css is overriding that).

Remove the widths/heights entirely:

<div class="grid-row"
     class="ui-grid-a">
         <a href="goTohomePage()" 
            id="other-color" 
            onClick='#'>
               <img src="http://lorempixel.com/80/80/food/3/"/>
         </a>
</div>

Fiddle

A couple of other code-cleanup things...

  • Assign multiple classes in one parameter: ...class="grid-row ui-grid-a"...

Upvotes: 0

MH2K9
MH2K9

Reputation: 12039

You can use float. Try by changing your CSS like below

.grid-row img
{

    max-width: 45% !important;
    width: 45% !important;
    padding: 10px;
    float: left;
}

Upvotes: 0

Related Questions