0

I'm trying to make some cards I am using to display an image and some information about some products in my database.

http://i63.tinypic.com/2yjo712.png (It won't let me upload the image directly to Stack for some reason..)

As you can see, the boxes don't really line up very well. I have tried messing with the divs that build each card individual by in-line editing to try and resolve this issue.

The cards are dynamic, and sit inside a row which is always 500px tall. What I want in the picture to take up 35% of available space, and the body of the card (Under the tabs) to take up the rest (Minus what the tabs take up).

I have no idea how to accomplish this, I wish I knew more CSS tricks. Could anyone help me figure out how to make these cards look more pleasant?

Also, a side note, I am using Bootstrap.

(Each panel is inside a col-md-4 at its current state, so that leaves 3 cards per row)

$bootstrap_width = 4;
$amountCols = 12/$bootstrap_width;
$loop = 1;
//Loop through rows of database that apply....
while($row = $ret->fetchArray(SQLITE3_ASSOC) ){

    if($loop == 1) {
        echo "<div class='row' style='height:500px;overflow:hidden;'>";
    }

    echo "<div class='col-md-".$bootstrap_width."'>";
    ?>
    <div class="panel with-nav-tabs panel-default">
        <div class="panel-body" style="padding:0px;">
            <div class="tab-content">
                <img id='ShowImage' height='auto' width='100%' src='<?=$image;?>' />
            </div>
        </div>
        <div class="panel-heading">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1default-<?=$row['uniqueID'];?>" data-toggle="tab">Info</a></li>
                    <li><a href="#tab2default-<?=$row['uniqueID'];?>" data-toggle="tab">Stock</a></li>
                    <li><a href="#tab3default-<?=$row['uniqueID'];?>" data-toggle="tab">Actions</a></li>
                </ul>
        </div>
        <div class="panel-body">
            <div class="tab-content">
                <div class="tab-pane fade in active" id="tab1default-<?=$row['uniqueID'];?>">Default 1</div>
                <div class="tab-pane fade" id="tab2default-<?=$row['uniqueID'];?>">Default 2</div>
                <div class="tab-pane fade" id="tab3default-<?=$row['uniqueID'];?>">Default 3</div>
            </div>
        </div>
    </div>
    <?
    echo "</div>";

    if($loop == $amountCols) {
        echo "</div>";
        $loop = 1;
    } else {
        $loop++;
    }

}
GrumpyCrouton
  • 8,486
  • 7
  • 32
  • 71

0 Answers0