How to put the code to show data in GRID?

Navigation
0

Can someone help me with the Grid view?

I am integrating a new design for an old script. Work is fine but as always I had problems with the <div> I still follow me in the code.

I know it's silly, but I throw away a whole day and I can not put the following in the correct format:

I'm pulling the db data for a price table. As I must play with the php between the html I can not put it to be displayed horizontally. Whatever you do is always vertical. This data auto generates the price tables vertically, I can not design several tables horizontally and insert the data separately. I only have one code that automatically generates in the number of tables configured from admin. And this is my problem, I want to show it horizontally, a grid format. Here I leave the code in case someone can help me or leave me some better idea.

enter the description of the image here 

<div class="content">
    <div class="container">
        <div class="row">
            <div>
               <h2 class="title"><?=$lang['b_07']?> & <?=$lang['b_247']?>
 </h2>
               <h5 class="description"><?=$lang['b_395']?></h5>
            </div>
        </div>
  <?php
    $packs = $db->QueryFetchArrayAll("SELECT id,coins,price FROM 'c_pack' 
 ORDER BY 'id' ASC");
    if(!$packs){
        echo '<div class="msg"><div class="error">'.$lang['b_43'].'</div>
 </div>';
    }

    foreach($packs as $pack){
        $price = ($site['c_discount'] > 0 ? number_format($pack['price'] * 
  ((100-$site['c_discount']) / 100), 2) : $pack['price']);
  ?>

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-3">
                        <div class="card card-pricing card-raised">
                            <div class="card-content">
                                <div class="icon icon-rose">
                                    <i class="material-icons">home</i>
                                </div>
                                <h4 class="card-title">
  <?=number_format($pack['coins']).' '.$lang['b_42'].' = '.($site['currency_code'] == '' ? get_currency_symbol('USD') : 
 get_currency_symbol($site['currency_code'])).$price?></br><?=$lang['b_36']?> = <?=($site['c_discount'] > 0 ? ''.get_currency_symbol($site['currency_code']).round($pack['price']/$pack['coins'], 4).''.get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4).'' : get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4))?></h4>
                                <div class="btn btn-rose btn-round" onclick="buyPack(<?=$pack['id']?>); return false"><?=$lang['b_199']?></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
<?php }?>

 <div style="clear:both"></div>
 <div id="pay_method"></div>
 </div>
    
asked by Carla 21.01.2018 в 22:35
source

2 answers

0

Remove <div class="col-md-12"> and its corresponding closing tag, that makes each card take the 12 columns and force the others to position themselves below. 

   <div class="container">
        <div class="row">
            <div class="col-md-12"> <!-- Remover este div -->
                <div class="col-md-3"> <!-- Dejar este para que tome 3 columnas -->
                    <div class="card card-pricing card-raised">
                        <div class="card-content">
                            <div class="icon icon-rose">
                                <i class="material-icons">home</i>
                            </div>
                            <h4 class="card-title"><?=number_format($pack['coins']).' '.$lang['b_42'].' = '.($site['currency_code'] == '' ? get_currency_symbol('USD') : get_currency_symbol($site['currency_code'])).$price?></br><?=$lang['b_36']?> = <?=($site['c_discount'] > 0 ? ''.get_currency_symbol($site['currency_code']).round($pack['price']/$pack['coins'], 4).''.get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4).'' : get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4))?></h4>
                            <div class="btn btn-rose btn-round" onclick="buyPack(<?=$pack['id']?>); return false"><?=$lang['b_199']?></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
answered by 21.01.2018 / 23:16
source
0

Carla, it seems that you are simply not placing the foreach in the right place, so it just changes the order a bit. Leave the <div class="col-md-12"> out of foreach ($packs as $pack) { ... } (do not remove it because your grid needs it anyway). It would be something like this: 

<div class="content">
    <div class="container">
        <div class="row">
            <div>
               <h2 class="title"><?=$lang['b_07']?> & <?=$lang['b_247']?></h2>
               <h5 class="description"><?=$lang['b_395']?></h5>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-md-12">

                <?php $packs = $db->QueryFetchArrayAll("SELECT id,coins,price FROM 'c_pack' ORDER BY 'id' ASC");
                if(!$packs) { 
                  echo '<div class="msg"><div class="error">'.$lang['b_43'].'</div></div>';
                }

                foreach($packs as $pack){
                  $price = ($site['c_discount'] > 0 ? number_format($pack['price'] * ((100-$site['c_discount']) / 100), 2) : $pack['price']);
                ?>
                    <div class="col-md-3">
                        <div class="card card-pricing card-raised">
                            <div class="card-content">
                                <div class="icon icon-rose">
                                    <i class="material-icons">home</i>
                                </div>
                                <h4 class="card-title"><?=number_format($pack['coins']).' '.$lang['b_42'].' = '.($site['currency_code'] == '' ? get_currency_symbol('USD') : get_currency_symbol($site['currency_code'])).$price?></br><?=$lang['b_36']?> = <?=($site['c_discount'] > 0 ? ''.get_currency_symbol($site['currency_code']).round($pack['price']/$pack['coins'], 4).''.get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4).'' : get_currency_symbol($site['currency_code']).round($price/$pack['coins'], 4))?></h4>
                                <div class="btn btn-rose btn-round" onclick="buyPack(<?=$pack['id']?>); return false"><?=$lang['b_199']?></div>
                            </div>
                        </div>
                    </div>

                <?php } ?>

                </div>
            </div>
        </div>
</body>


<div style="clear:both"></div>
<div id="pay_method"></div>
</div>

Thus each price block will be added nested to the container that spans the 12 fragments of the grid, each occupying a third part (col-md-3 meaning that you will have rows of 4, and you can make them more or be less depending on the device by adding col-sm-, col-xs- or col-lg-, etc). I hope it serves you. Greetings!

    
answered by 22.01.2018 в 00:03
Read from a sheet Google Sheets Display data from a matrix