It displays the cards in one column instead of three at medium sizes.
I've tried the basic layout in HTML and it works fine.
echo '<div class="row>';
if($res->num_rows > 0){
while($row = $res->fetch_assoc()){
echo '<div class="col s12 m4">' .
'<div class="card">' .
'<div class="card-content">' .
'<span class="card-title">' . $row["Kanji"] . '</span>' .
$row["Onyomi"]. ' ' . $row["Kunyomi"] .
'</div>' .
'<div class="card-action">' .'<p>' . $row["English"] . '</p>' . '</div>' .
'</div>'.
'</div>';
}
}
echo '</div>';
I did it back to front.
Here is what worked.
<div class="row">
<?php if($res->num_rows > 0){
while($row = $res->fetch_assoc()){
?>
<div class="col s12 m4">
<div class="card">
<div class="card-content">
<span class="card-title"><?php echo $row["Kanji"] ?></span>
<p><?php echo $row["Onyomi"]; echo $row["Kunyomi"] ?></p>
</div>
<div class="card-action">
<?php echo $row["English"] ?>
</div>
</div>
</div>
<?php } } ?>
you can check for materialize grid https://materializecss.com/grid.html
Using materialize grid you you can put the necessary columns.
One example for 3 columns in a row
<div class="row">
<div class="col s4">Column 1</div>
<div class="col s4">Column 2</div>
<div class="col s4">Column 3</div>
</div>
you forgot quotation marks at the end of row class: class="row>
Related
Im working on a article:
I want 3 in one row. I know how to do it with stype, but i dont know how to do it with style.php.
enter image description here
This is only the part of code but I need to properly implement grid:
echo '<div class="container">';
echo '<div class="row padding">';
echo '<div class="col-md-4 col-sm-12">';
echo '<div class="card">';
echo '<img src="' . UPLPATH . $row['slika'] . '"';
echo '<div class="card-body">';
echo '<h6 class="card-title">';
echo '«';
echo $row['naslov'];
//style.php
<?php
header('content-type:text/css');
$grid='grid';
?>
.container {
display: <?=$grid?>;
}
Well, you are dealing the problem really improperly.
I don't really get why you need to use a variable named $grid while you can directly pass the grid attribute to your .container.
You don't have do complicate it like this.
What I would do in your case would be the next thing:
I would create a class named .grid like:
.grid {
display: grid !important;
}
As for the rest I would put it like this:
Please provide more info as regards how you extract out the $row variable data.
The layout per se, would have to be like this in order for you to have 3 cards in a row. Hope that helps you. Cheers
<div class="container grid">
<div class="row padding">
<div class="col-md-12 col-sm-12">
<div class="col-md-4 col-sm-4">
<div class="card">
<img src="<?= '"'. UPLPATH . $row['slika'] . '"' alt="whatever
you need" />
<div class="card-body">
<h6 class="card-title">
<?php echo '«' . " ". $row['naslov']; ?>
</h6>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="card">
<img src="<?= '"'. UPLPATH . $row['slika'] . '"' alt="whatever
you need" />
<div class="card-body">
<h6 class="card-title">
<?php echo '«' . " ". $row['naslov']; ?>
</h6>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="card">
<img src="<?= '"'. UPLPATH . $row['slika'] . '"' alt="whatever
you need" />
<div class="card-body">
<h6 class="card-title">
<?php echo '«' . " ". $row['naslov']; ?>
</h6>
</div>
</div>
</div>
</div>
</div>
I got this code
if ($row['Sender'] == Admin ) {
echo '<div class="mesgs"> </div>';
echo '<div class="msg_history"> </div>';
echo '<div class="incoming_msg"> </div>';
echo '<div class="incoming_msg_img"><img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>';
echo '<div class="received_msg"> </div>';
echo '<div class="received_withd_msg"> </div>';
echo "<p>" . $row["message"] . "</p>";
echo "<span class='time_date'>" . $row["dating"] . "</span>";
} else {
echo '<div class="mesgs"> </div>';
echo '<div class="msg_history"> </div>';
echo '<div class="outgoing_msg"> </div>';
echo '<div class="sent_msg"> </div>';
echo "<p>" . $row["message"] . "</p>";
echo "<span class='time_date'>" . $row["dating"] . "</span>";
It works fine , i'm supposed to get this
But i get this,
Like it's not in the chat , it gets out of the page , but i want a scroll down to check all the chat in the same size
the original code
<div class="mesgs">
<div class="msg_history">
<div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<p>Test which is a new approach to have all
solutions</p>
<span class="time_date"> 11:01 AM | June 9</span></div>
</div>
</div>
<div class="outgoing_msg">
<div class="sent_msg">
<p>Test which is a new approach to have all
solutions</p>
<span class="time_date"> 11:01 AM | June 9</span> </div>
</div>
<div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<p>Test, which is a new approach to have</p>
<span class="time_date"> 11:01 AM | Yesterday</span></div>
</div>
</div>
<div class="outgoing_msg">
<div class="sent_msg">
<p>Apollo University, Delhi, India Test</p>
<span class="time_date"> 11:01 AM | Today</span> </div>
</div>
<div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<p>We work directly with our designers and suppliers,
and sell direct to you, which means quality, exclusive
products, at a price anyone can afford.</p>
<span class="time_date"> 11:01 AM | Today</span></div>
</div>
</div>
</div>
I have written CSS for two column layout and I have a "users" database with notes of the users.
So when I run a while loop like this: while($row = mysqli_fetch_array($result))
PHP should dynamically create html like this (depending on no. of users):
<div class="row">
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
<!-- Notes of user 1 -->
</div>
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
<!-- Notes of user 2 -->
</div>
</div>
<div class="row">
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
<!-- Notes of user 3 -->
</div>
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
<!-- Notes of user 4 -->
</div>
</div>
If there's is only one user, html should be like this:
<div class="row">
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
<!-- Notes of user 1 -->
</div>
</div>
And similarly if there are 3 users, there should one row with two columns and another row with one column.
Is there any way to do that?
Edit: Added my php code here.
<?php
$query = "SELECT * FROM users";
$result = mysqli_query($conn, $query);
while($row = mysqli_fetch_array($result)){
?>
<div class="row">
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
</div>
</div>
<?php } ?>
Problem with that code is it's creating a new row with "one column" for every user. My goal is to have "two columns" in the row.
you can achieve things like that with the modulo operator (%) within loops.
$i = 0;
$rowCount = mysqli_num_rows($result);
$rowsHTML = '';
while($row = mysqli_fetch_array($result)){
$notesHTML = '<div class="col">
<div class="col-content">'.$row['notes'].'</div>
<!-- Notes of user 1 -->
</div>';
if($i%2 == 0){
$notesHTML = '<div class="row">'.$notesHTML;
// check if its the last item and the row has to be closed after 1 col
if($i+1 == $rowCount){
$notesHTML = $notesHTML.'</div>';
}
} else {
$notesHTML = $notesHTML.'</div>';
}
$rowsHTML .= $notesHTML;
$i++;
}
echo $rowsHTML;
<?php
$query = "SELECT * FROM users";
$result = mysqli_query($conn, $query);
$i = 0;
?>
<div class="row">
<?php
while($row = mysqli_fetch_array($result)){
if($i>1 && $i%2==0) echo '</div><div class="row">';
$i++;
?>
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
</div>
<?php } ?>
</div>
Help i uses this code PHP and bootstrap please see image.
<?php
$sql = "SELECT * FROM article ORDER BY article_id DESC";
$r = page_query($link, $sql, 10);
while ($a = mysqli_fetch_array($r)) {
$src = "images/cover-image.jpg";
if ($a['image_id'] != 0) {
$src = "read-image.php?id={$a['image_id']}";
}
echo '
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="thumbnail">
<div class="thumb">
<img src="' . $src . '" alt="">
<div class="caption-overflow">
<span>
<i class="icon-plus3"></i>
<i class="icon-link2"></i>
</span>
</div>
</div>
<div class="caption">
<h6 class="no-margin-top text-semibold">
Not rapturous
<i class="icon-download pull-right"></i>
</h6>
' . mb_substr($a['article_text'], 0, 120, 'utf-8') . '...<br>' . '
</div>
</div>
</div>';
}
if (page_total() > 1) {
echo '<p id="page">';
page_echo_pagenums();
echo '</p>';
}
?>
Image
I use this code PHP and bootstrap see images
The problem of this sort on the part of the how to had to modify how it displays the correct result.
What I found Is:
You opened <div class="row">. But, not closed. (It may be one of the reason for alignment not coming properly)
And, My suggestion is not to use <div class="row"> inside while loop. Place it above while loop. Because every occurrence in while loop, it will take single row as whole div. Putting it before while loop, it will help you to place all col-lg-3 rows inside <div class="row"> in proper alignment.
Updated Code:
<div class="row">
<?php
$sql = "SELECT * FROM article ORDER BY article_id DESC";
$r = page_query($link, $sql, 10);
while ($a = mysqli_fetch_array($r)) {
$src = "images/cover-image.jpg";
if ($a['image_id'] != 0) {
$src = "read-image.php?id={$a['image_id']}";
}
echo '
<div class="col-lg-3 col-sm-6">
<div class="thumbnail">
<div class="thumb">
<img src="' . $src . '" alt="">
<div class="caption-overflow">
<span>
<i class="icon-plus3"></i>
<i class="icon-link2"></i>
</span>
</div>
</div>
<div class="caption">
<h6 class="no-margin-top text-semibold">
Not rapturous
<i class="icon-download pull-right"></i>
</h6>
' . mb_substr($a['article_text'], 0, 120, 'utf-8') . '...<br>' . '
</div>
</div>
</div>';
}
?>
</div>
When, I did these changes in my desktop. It works fine for me. Keep calm. Have patience. And, Try once again. It will work.
I'm trying to present my sql rows in bootstrap grid dynamically
<div class="row>
<div class="col-md-3">sql row 1</div>
<div class="col-md-3">sql row 2</div>
<div class="col-md-3">sql row 3</div>
<div class="col-md-3">sql row 4</div>
</div>
<div class="row>
<div class="col-md-3">sql row 5</div>
<div class="col-md-3">sql row 6</div>
<div class="col-md-3">sql row 7</div>
<div class="col-md-3">sql row 8</div>
</div>
and I'm having trouble how to set up the while loop. what I have now just does
<div class="row>
<div class="col-md-3">sql row 1</div>
<div class="col-md-3">sql row 2</div>
<div class="col-md-3">sql row 3</div>
<div class="col-md-3">sql row 4</div>
<div class="col-md-3">sql row 5</div>
<div class="col-md-3">sql row 6</div>
<div class="col-md-3">sql row 7</div>
<div class="col-md-3">sql row 8</div>
</div>
how can I set up loop to assign four col-md-3 classes to each row automatically and then continue. Current code:
<div class="row">
while($row = $result->fetch_assoc())
{
$spons_amt = round($row["spons_amt"] + 500, 2);
echo '<div class="col-md-3">' . $spons_amt . '</div>'
}
mysqli_close($conn);
</div>
I'm guessing what I need to do is
<div class="row">
while($row = $result->fetch_assoc())
// count number of rows
{
//list 4 of these (to make a row)
$spons_amt = round($row["spons_amt"] + 500, 2);
echo '<div class="col-md-3">' . $spons_amt . '</div>'
}
// echo </div><div class="row"> between every set of 4
mysqli_close($conn);
</div>
Am I going about this the right way? How could I complete the code?
The most elegant solution is to use PHP's array_chunk function:
foreach(array_chunk($entries, 4) as $entriesRow) {
echo '<div class="row">';
foreach ($entriesRow as $entry) {
echo "<div class='col-md-3'>$entry</div>";
}
echo '</div>';
}
(Assuming that you have fetched all DB rows in $entries array.)
Try something like this:
$n = 0;
echo '<div class="row">';
while($row = $result->fetch_assoc())
{
$spons_amt = round($row["spons_amt"] + 500, 2);
if($n%4 == && $n =! 0) {
echo '</div>';
echo '<div class="row">';
echo '<div class="col-md-3">' . $spons_amt . '</div>';
$n = 1;
} else {
echo '<div class="col-md-3">' . $spons_amt . '</div>';
$n++;
}
}
echo '</div>';
No need for all this complexity. Bootstrap works within a 12 col grid system automatically. Just make sure you loop and make col size so that that evenly divides by 12 e.g. col-md-4.
This example will provide 3 per row automatically since 12 / 4 = 3. Just update to use ECHO or whatever you need this is just a basic concept example.
<div class="row">
LOOPCODE
{
<div class="col-md-4">
DATA
</div>
}
</div>