CODEWITHSUNDEEP
phphtmlcss
ShoibAhamed
ShoibAhamed

Reputation: 359

display list items in multiple columns and limit the number of rows

i'm developing a php project in which i'm getting the list from the database and i need to display this data in html in 3 columns and 10 rows and add a button "more" in the end

<?php foreach ($items as $item) { ?>
        <ul>
            <li><a href="<?php echo $item['href']; ?>" >
            <?php echo $item['name']; ?></a></li>
        </ul>
        <?php } ?>

I want it to be displayed as-

item1 item2 item3

item4 item5 item6

.

.

.

.

Maximum 10 rows

last row will be

item item "more" - only if there are more items in the list

"more" is just a link which will take me to some other page

Thanks for any help.

Upvotes: 0

Views: 8619

Answers (3)

Mupps
Mupps

Reputation: 346

<style>
 .row { 
     width:100%; 
     float:left;    
 }
 .item { 
     width:100px; 
     float:left;    
 }

</style>

<?php 
    //*** your array of items
    $items = array("item1", "item2", "item3", "item4","item5", "item6", "item7", "item8", "item9", "item10");

    $numItems = sizeof($items);

    //*** max number of rows
    $maxRows = 10;
    $maxItems = 3 * $maxRows;

    echo '<div class="row">';
    for ($i=0; $i<$numItems;$i++) {
        echo '<div class="item">'.$items[$i].'</div>';
        if (($i+1) % 3 == 0) {
            //*** if divisible by 3, close row
            echo '</div><div class="row">'; 
        }
        if ($i == $numItems) {
            //*** last item reached, close div
            echo '</div>';  
        }
        if ($i+1 >= $maxItems ) {
            //*** max 10 row, add more button.
            echo '</div><input type="submit" value="Add More">'; 
        return; 
        }
    }
?>

Upvotes: 2

Sowmya
Sowmya

Reputation: 26969

Add display:inline to li and use pseudo class to break it

ul{
    margin:0
}
li{
    display:inline
}
li:nth-child(3n):after {
 content:"\A"; 
 white-space:pre; 
}

Script (To display more link)

$('#moreli').toggle($("li").size() > 6);

This enables the more link after 6 list items, you can change the count in the script.

Note: Reduce the list items to check the effect

DEMO UPDATED

Upvotes: 3

Manoj Meena
Manoj Meena

Reputation: 244

Try to use this:

<?php 
$count=0;
foreach ($items as $item) { ?>
<ul class="col3">
  <li>
  <?php if($count > 9) { ?>
    <a href="#">More</a></li></ul>
    <?php break;
  } else{ ?>
    <a href="<?php echo $item['href']; ?>" >
    <?php echo $item['name'];
    $count=$count+1;
    ?></a>
  <?php } ?>
  </li>
</ul>
<?php } ?>

and following css for it

.col3
{
margin-left:-3%;
}

.cols3 li
{
width:30%;
margin-left:3%;
display:inline-block;
vertical-align:top;
}

.cols3 li a
{
display:block;
}

Upvotes: 0

Related Questions