I have a comment section on my page, And I add a scroller for comments. If in the comments section there are no comments then I want to hide the scroller bar. In my CSS I give overflow: auto; but still it shows scroller bar when there are no comments.
CSS:
<style>
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 100%;
margin-bottom: 25px;
overflow: auto;
}
.force-overflow
{
min-height: 450px;
}
#style-6::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
</style>
Code:
<div class="scrollbar" id="style-6">
<div style=" height:270px;" class="force-overflow">
<?php foreach ($userComments as $comment):?>
<div class="post-details-wrapper">
<?php
$postdate =strtotime($comment['timestamp']);
$now = time();
?>
<div class="col-sm-12">
<p>
<img style="height: 45px;width: 48px;border-radius:50%;" src="<?php echo base_url();echo $comment['thumb_url']?>" />
<b style="padding-right:6px;padding-left:6px;border-radius:25px;background-color:#888888;color:white;font-family:Roboto, Arial, sans-serif;font-weight:500;>"><?php echo $comment['username'];?></b>
<?php echo date('d-m-Y',$postdate);?>
</p>
</div>
<div class="col-sm-12">
<p style="font-size:15px;"><?php echo $comment['comment']?></p>
</div>
</div>
<?php endforeach;?>
</div>
</div>
In the bellow image, you can see the scroller bar present when no comments.
try to set: overflow-y:auto; instead of overflow:auto;
Maybe it will help
make scroll bar height to min-height: 300px . It may help.
.scrollbar
{
margin-left: 30px;
float: left;
min-height: 300px;
width: 100%;
margin-bottom: 25px;
overflow: auto;
}
Related
I found a bootstrap 4 card snippet but when I integrate it to my WordPress plugin, it seem different from original form.I want to show posts as 3 column.
However some posts hasn't any picture - can someone explain why? Also the gird form isnt equal to original form.
Original snippet:
https://bootsnipp.com/snippets/kzbzW
My website :
http://www.themeforest-deneme2.deniz-tasarim.site/2020/01/03/fhhfh/
My plugin codes:
( I didn't change in styles )
//paste
$args = array(
'post_type' => $settings['post_type'],
'author__in' => $settings['authors2'],
'posts_per_page' => $settings['posts_per_page'],
'orderby' => $settings['orderby'],
'order' => $settings['order'],
);
echo'<div class="row">';
echo'<div class="col-md-12">';
$query = new \WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
//echo "<div style=background:blue> lsdkjf </div>";
// get_template_part( 'template-parts/content', 'masonry' );
// the_title();
//the_content();
?>
<style>
h1{
text-align:center;
margin-bottom:50px;
margin-top:50px;
}
.blog-card-blog {
margin-top: 30px;
}
.blog-card {
display: inline-block;
position: relative;
width: 100%;
margin-bottom: 30px;
border-radius: 6px;
color: rgba(0, 0, 0, 0.87);
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.blog-card .blog-card-image {
height: 60%;
position: relative;
overflow: hidden;
margin-left: 15px;
margin-right: 15px;
margin-top: -30px;
border-radius: 6px;
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.blog-card .blog-card-image img {
width: 100%;
height: 100%;
border-radius: 6px;
pointer-events: none;
}
.blog-card .blog-table {
padding: 15px 30px;
}
.blog-table {
margin-bottom: 0px;
}
.blog-category {
position: relative;
line-height: 0;
margin: 15px 0;
}
.blog-text-success {
color: #28a745!important;
}
.blog-card-blog .blog-card-caption {
margin-top: 5px;
}
.blog-card-caption {
font-weight: 700;
font-family: "Roboto Slab", "Times New Roman", serif;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.blog-card-caption, .blog-card-caption a {
color: #333;
text-decoration: none;
}
p {
color: #3C4857;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
.blog-card .ftr {
margin-top: 15px;
}
.blog-card .ftr .author {
color: #888;
}
.blog-card .ftr div {
display: inline-block;
}
.blog-card .author .avatar {
width: 36px;
height: 36px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;blog-
}
.blog-card .ftr .stats {
position: relative;
top: 1px;
font-size: 14px;
}
.blog-card .ftr .stats {
float: right;
line-height: 30px;
}
</style>
<!-- <div class="col-md-2"> -->
<div class="blog-card blog-card-blog">
<div class="blog-card-image">
<!-- <img class="img" src=<?php //the_post_thumbnail(); ?>> -->
<?php the_post_thumbnail('medium', array('class' => 'img')); ?>
<div class="ripple-cont"></div>
</div>
<div class="blog-table">
<h6 class="blog-category blog-text-success"><i class="far fa-newspaper"></i> News</h6>
<h4 class="blog-card-caption">
<?php the_title(); ?>
</h4>
<p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="ftr">
<div class="author">
<img src="https://picsum.photos/id/1005/5760/3840" alt="..." class="avatar img-raised"> <span>Lorem</span>
</div>
<div class="stats"> <i class="far fa-clock"></i> 10 min </div>
</div>
</div>
</div>
</div>
</div>
<?php
//ekleme sonu
}
} else {
echo "<div style=background:red> lsdkjf </div>";
}
Personally, I can't see where you implemented Bootstrap4's grid columns:
I want to show posts as 3 column.
This is how you should implement it in HTML, since I don't do Javascript:
<div class="row">
<div class="col">Content</div>
<div class="col">Content</div>
<div class="col">Content</div>
</div>
Bootstrap has its rows split into 12 parts, so the sum of all columns should add up to 12 otherwise something unexpected may happen but I never tried.
For the md thing that you added, it is supposed to target certain screen sizes, but I don't think it's necessary since you didn't specify anything about resolution.
About the numbers, they are the ratios of the columns. As you want three equal slices, you can ignore the trailing number but just remember to throw in three columns.
If my explanation seems vague, please refer to the documentation.
I'm using mpdf 6.0.
The issue is when I css as 10%
<div class="progressbar">
<div class="progressbar-value bg-color-green" style="width: 10%; overflow: hidden;"> 10%</div>
</div>
The result as:
And when I add 3%, it covers the whole width
<div class="progressbar">
<div class="progressbar-value bg-color-green" style="width: 3%; overflow: hidden;"> 3%</div>
</div>
The result is:
Please guide me to solve this problem.
PHP:
<?php
set_time_limit(600);
ini_set('display_errors', 'Off');
ini_set("memory_limit","256M");
require 'mpdf.php';
$mpdf = new \mPDF();
$html = "";
$html .= <<<EOD
<div class="progressbar">
<div class="progressbar-value bg-color-green" style="width: 3%; overflow: hidden;"> 11%</div>
</div>
EOD;
$stylesheet = file_get_contents('style.css');
$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html, 2);
$mpdf->Output('','I');
exit;
?>
CSS (style.css):
.progress, .progress-bar, .progressbar {
position: relative;
display: block;
background: rgba(0, 0, 0, .05);
overflow: hidden;
font-weight: bold;
line-height: 20px;
height: 20px;
border-radius: 4px;
color: white;
}
.progressbar-value {
display: block;
white-space: nowrap;
overflow: hidden;
}
.text-left {
text-align: left !important;
}
.bg-color-green {
background-color: #61BD4F;
}
I solved the above issue by using background: linear-gradient() and background-size: x%
<div class="progressbar" style="float:left;">
<div class="progressbar-value" style="background-image: linear-gradient(to left, #00FF00 100%); background-size:3%;float:left; height:15px;width:100%;">
<div class="text" style="text-align: left; float: left;display:block;font-size:12px;height:15px;">3%</div>
</div>
</div>
Now the result is
I have made this gallery listview page here and I want it so that all 3 columns are equally filled with items from my database, right now it creates a new column every time and displays the same sql item thrice.
Img here: http://i.stack.imgur.com/LMw1L.png
As you can see it just creates a whole bunch of columns which is not what I want.
How do I alter my php so that it neatly distributes the database items in my 3 columns (.column, .column-2, .column-3)?
home.php
<?php
ob_start();
require_once("connect.php");
if(isset($_POST['name'])){
$_SESSION["user"] = $_POST["name"];
$name = $_SESSION["user"];
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/dotbar.css">
<link rel="stylesheet" href="css/loginoverlay.css">
<!--jQuery library voor de menubar -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<!-- Show login screen, when cookie is not placed -->
<?php
if (empty($_COOKIE['first_time'])) {
?><div id="black-overlay">
<div id="grey-box">
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
<form action="home.php" method="POST">
<br>
<br>
<label for="name"> Naam: </label>
<br>
<input type="text" name="name" id="name">
<label for="password"> Wachtwoord: </label>
<br>
<input type="password" name="password" id="password">
<input type="submit" value="submit" name="submit">
</form>
</div>
</div><?php;
setcookie("first_time", 1, time()+157680000); /* expire in 5 years */}
?>
<!--page content -->
<div class="container">
<div class="container2">
<nav id='nav_bar'>
<ul class='nav_links'>
<li>
<?php
//If there is a user SESSION echo in NAV bar
if(isset($_SESSION['user'])) {
//echo admin link when admin is logged in
if ($_SESSION['user'] == 'admin') {
echo "<a href='admin.php'>Admin</a>";
echo "/<br>";
echo "<a href='sessiondestroy.php'>Log uit</a>";}
//echo user which is not the admin when logged in
else {echo $_SESSION["user"];
echo "/<br>";
echo "<a href='sessiondestroy.php'>Log uit</a>";}}
//echo the login button when user is not logged in
else { echo "<a href='login.php'>Login</a>";}
?>
<br><br><br>→<br><br><br>
</li>
<li>
<a href="?pages=home">
Home<br><br><br>→<br><br><br>
</a>
</li>
<li>
<a href="?pages=news">
Blog<br><br><br>→<br><br><br>
</a>
</li>
<li>
<a href="?pages=news2">
Gallery <br><br><br>→ <br><br><br>
</a>
</li>
<li>
<a href="?pages=news3">
About <br><br><br>→ <br><br><br>
</a>
</li>
<li>
<a href="?pages=news4">
Contact<br><br><br>→<br><br><br>
</a>
</li>
</ul>
</nav>
<div class="content">
<h1>
GRAKA!
</h1>
<div id="bar2">
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
<div id="circle4"></div>
<div id="circle5"></div>
<div id="circle6"></div>
<div id="circle7"></div>
<div id="circle8"></div>
<div id="circle9"></div>
<div id="circle10"></div>
<div id="circle11"></div>
</div>
<?php
if(isset($_GET['pages'])) {
$pages = $_GET['pages'];
$pagename = $pages. '.php';
include_once($pagename);
}?>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<h2>
Designed and produced by
</h2>
<h3>
All rights reserved.<br>
</h3>
</div>
</footer>
<!--Menubar script -->
<script src="menubar.js"></script>
</body>
</html>
<?php
ob_flush();
?>
news2.php
$query = "SELECT * FROM gallery";
$result = mysqli_query($con, $query);
$count = 0;
while ($row = mysqli_fetch_array($result)) {?>
<?php if($count % 3 == 0) {?>
<div class="column">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php}?>
<div class="column2">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<div class="column3">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php } ?>
css:
body {
margin: 0px;
padding: 0px;
background-color: black;
background-attachment: fixed;
background-image: url(img/2560x2560bubbles.png);
background-size: cover;
font-family: "Segoe UI", 'Helvetica Neue';
}
.container {
margin-top: 520px;
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
background-image: -moz-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
background-image: -webkit-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
background-image: -ms-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
}
.container2 {
width: 1280px;
padding-bottom: 100px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
nav {
margin-left: 7.5%;
margin-top: 100px;
width: 10%;
float: left;
}
#nav_bar {}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
margin-left: 5.3%;
}
ul {
list-style-type: none;
}
li {
float: left;
font-size: 1em;
width: 100%;
height: auto;
text-align: left;
font-weight: bold;
line-height: 1em;
margin-left: 0%;
margin-top: 0px;
clear: none;
min-height: 0px;
}
a {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: grey;
}
a:focus {
text-decoration: none;
color: yellowgreen;
}
a:active {
text-decoration: none;
color: greenyellow
}
.content {
width: 70%;
margin-right: 7.5%;
margin-top: 100px;
float: right;
}
article {
width: 45.4%;
padding: 2.3%;
float: left;
}
img {
width: 100%;
}
h1 {
text-align: right;
margin: 0px;
font-size: 6.0em;
margin-bottom: 10px;
}
h2 {
margin: 0px;
text-align: center;
}
h3 {
margin: 0px;
text-align: center;
}
p {}
p1 {
float: right;
}
footer {
margin-top: 320px;
background-color: rgb(28, 28, 28);
height: 260px;
padding: 120px;
}
.footer-content {
color: white;
}
/*--Bloglist.css --*/
#blog {
width: 100%;
padding: 2.3%;
margin-top: 2.3%;
overflow: hidden;
}
article3 {
width: 100%;
padding: 2.3%;
overflow: hidden;
}
#blogfoto {
width: 257px;
height: 257px;
float: left;
overflow: hidden;
background-color: black;
}
p1#blog {
margin-top: 0px;
width: 62.07%;
float: left;
}
h4 {
margin-left: 2.3%;
float: left;
width: 56.66%;
margin-bottom: 0px;
}
/*-- Thumbnails --*/
.wrapper {
width: 400px;
height: 200px;
overflow: hidden;
background-size: cover;
}
/*-- Gallerylist -- */
.column {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: blue;
}
.column2 {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: green;
}
.column3 {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: red;
}
I'm assuming that you want each column to show a different row from your database. If so, just include a counter variable say $count = 0; before you enter your loop.
When $count % 3 == 0 use the class '.column', when $count % 3 == 1 use the '.column-2' and $count % 3 == 2 use '.column-3'.
Don't forget to increment the loop counter at the end of each iteration.
Edit:
<?php
$query = "SELECT * FROM gallery";
$result = mysqli_query($con, $query);
$count = 0;
while ($row = mysqli_fetch_array($result)) {?>
<?php if($count % 3 == 0) {?>
<div class="column">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
<?php }
else if($count % 3 == 1){
?>
</div>
<div class="column2">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php }
else{
?>
<div class="column3">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php
}
$count++;
}
?>
This is not the neatest code, but this should get the job done.
Aligning image at start and
I am using following code
<div id="ringName" style="background-color: #701344;height: 50px; border-radius: 4px; width: 800px; ">
<img style="margin-top:5; margin-left:20;" src="images/about_us_logo.png" alt="" width="40" height="40" />
<div style="font-size: 24px; color: #FFF; text-align: center; line-height: 50px; height: 50px; border-radius: 4px; width: 760px; " ><?php echo $store['name'] ?></div>
</div>
What i want to do is, make a Voilet bar of width 800px , height 50px.
The <img> tag will show logo at like margin left 5 and margin top 5. Means at start in center vertical at start of The bar.
However I want to show the store name in the middle of the MAIN DIV, CEnter horizontal, center vertical.
In above code, the Text is not showing, and the margins to the logo are not working either.
What are the fixes
Here's the debugged code: http://jsfiddle.net/u7G2M/.
HTML:
<div id="ringName">
<img style="" src="http://placehold.it/40x40" alt="" />
<div>Store Name</div>
</div>
CSS:
#ringName {
background-color: #701344;
height: 50px;
border-radius: 4px;
width: 800px;
}
#ringName > img {
margin-top:5px;
margin-left:20px;
width: 40px;
height: 40px;
}
#ringName > div {
display: inline-block;
font: 24px/50px Sans-Serif;
color: #fff;
text-align: center;
vertical-align: top;
width: 700px;
}
.className{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
this is my worksite - mysite i have created a page and called it to the home page using the following code
<div class="hilight-hometext">
<?php if(is_front_page()) :
$home_page_post_id = 308;
$home_page_post = get_post( $home_page_post_id, ARRAY_A );
$content_home = $home_page_post['post_content'];
$content_title = $home_page_post['post_title'];
?><?php
echo $content_home;
endif; ?></div>
and the result is
<div class="hilight-hometext">
<div id="hilightbox">
<div class="hilightbox-text">
<h2>At Salisbury we want everyone to understand their landscaping choices</h2>
Our latest landscaping innovation is our Outdoor Vision questionnaire. We’ll guide you through a set of questions that will help you realize what you want out of your yard.
</div>
<!-- end tier 2 text -->
<div class="hilightbox-action">
<a class="myButton" href="resources/the-outdoor-vision-tool/">GET STARTED</a>
Your Outdoor Vision
</div>
</div></div>
i have added the styling as follows
#hilightbox {
background: url(../img/action-bg.jpg);
width: 100%;
margin: 20px auto;
}
#hilightbox .hilightbox-text {
width: 75%;
float: left;
margin: 0;
}
#hilightbox .hilightbox-action {
width: 25%;
float: left;
padding: 15px 0;
}
.myButton {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c9df23), color-stop(1, #747728));
background: -moz-linear-gradient(center top, #c9df23 5%, #747728 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9df23', endColorstr='#747728');
background-color: #c9df23;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 20px;
font-weight: bold;
padding: 14px 14px;
text-decoration: none;
text-shadow: 1px 1px 0px #747728;
}
but the background image and the styles are not showing up.Please help!! Thanks
I think if you just add this:
#hilightbox {
background: url(../img/action-bg.jpg);
width: 100%;
margin: 20px auto;
overflow: hidden;
}
it will solve you problem.
currently your container div #hilightbox does not know about child div's (.hilightbox-text and hilightbox-action) height & width because of float:left property.