I'm trying to make a loading screen cause I'm using PHP to dynamically bring in specific services for this website I'm making and I tried using height: 100% on my wrapper div and it just does not work. I got to a point where I tried height: 100vh but obviously it only takes 100% of the view area so I can just scroll down and see the other content.
HTML
<?php include ('header.php'); ?>
</head>
<body>
<div class="background-loading">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<span>Loading</span>
</div>
</div>
<div class="banner-section" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images3/heroImage.jpg);">
<h1>Services</h1>
</div>
<div class="services-section">
<div class="services">
<?php
require_once 'includes/dbh-inc.php';
$sql = "SELECT serviceName, servicePageName, serviceImage FROM addService";
$result = $conn-> query($sql);
if ($result-> num_rows > 0) {
while ($row = $result-> fetch_assoc()) {
echo '<div class="service-title">';
echo '<h2>'. $row["serviceName"] .'</h2>';
echo '</div>';
echo '<a href='. $row["servicePageName"] .'>';
echo '<div class="service-container" style="background-image: url(data:image/jpg;base64,'.base64_encode($row['serviceImage']).')">';
echo '<h1>Click Me!</h1>';
echo '</div>';
echo '</a>';
}
}
$conn-> close();
?>
<!--
<div class="service-title">
<h2>Business Printing</h2>
</div>
<a href="businessPrinting.php">
<div class="service-container" style="background-image: url(images3/business1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Canvas Printing</h2>
</div>
<a href="canvasPrinting.php">
<div class="service-container" style="background-image: url(images3/canvas1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Custom Apperal</h2>
</div>
<a href="">
<div class="service-container" style="background-image: url(images3/apperal1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Embroidery</h2>
</div>
<a href="">
<div class="service-container" style="background-image: url(images3/embroidery1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Engraving</h2>
</div>
<a href="">
<div class="service-container" style="background-image: url(images3/engraving1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Signs</h2>
</div>
<a href="signsAndBanners.php">
<div class="service-container" style="background-image: url(images3/signs1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
-->
</div>
</div>
<?php include ('footer.php'); ?>
CSS
/* Screen Loader */
.background-loading {
background-color: var(--clr-primary);
z-index: 1000;
height: 100vh;
position: sticky;
}
.wrapper{
width:200px;
height:60px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
.circle{
width:20px;
height:20px;
position: absolute;
border-radius: 50%;
background-color: #fff;
left:15%;
transform-origin: 50%;
animation: circle .5s alternate infinite ease;
}
#keyframes circle{
0%{
top:60px;
height:5px;
border-radius: 50px 50px 25px 25px;
transform: scaleX(1.7);
}
40%{
height:20px;
border-radius: 50%;
transform: scaleX(1);
}
100%{
top:0%;
}
}
.circle:nth-child(2){
left:45%;
animation-delay: .2s;
}
.circle:nth-child(3){
left:auto;
right:15%;
animation-delay: .3s;
}
.shadow{
width:20px;
height:4px;
border-radius: 50%;
background-color: rgba(0,0,0,.5);
position: absolute;
top:62px;
transform-origin: 50%;
z-index: -1;
left:15%;
filter: blur(1px);
animation: shadow .5s alternate infinite ease;
}
#keyframes shadow{
0%{
transform: scaleX(1.5);
}
40%{
transform: scaleX(1);
opacity: .7;
}
100%{
transform: scaleX(.2);
opacity: .4;
}
}
.shadow:nth-child(4){
left: 45%;
animation-delay: .2s
}
.shadow:nth-child(5){
left:auto;
right:15%;
animation-delay: .3s;
}
.wrapper span{
position: absolute;
top:75px;
font-family: 'Lato';
font-size: 20px;
letter-spacing: 12px;
color: #fff;
left:15%;
}
What you are looking for is called modal. One way to do that is use position fixed, a non-transparent background, 100% width and height and a higher z-index than the rest of your content. Then pin it to the top left.
Then when you are done loading, set its display to "none".
window.setTimeout(()=>{document.getElementById('background-loading').style.display = 'none';}, 3000);
#background-loading {
background-color: white;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.wrapper{
width:200px;
height:60px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
.circle{
width:20px;
height:20px;
position: absolute;
border-radius: 50%;
background-color: #fff;
left:15%;
transform-origin: 50%;
animation: circle .5s alternate infinite ease;
}
#keyframes circle{
0%{
top:60px;
height:5px;
border-radius: 50px 50px 25px 25px;
transform: scaleX(1.7);
}
40%{
height:20px;
border-radius: 50%;
transform: scaleX(1);
}
100%{
top:0%;
}
}
.circle:nth-child(2){
left:45%;
animation-delay: .2s;
}
.circle:nth-child(3){
left:auto;
right:15%;
animation-delay: .3s;
}
.shadow{
width:20px;
height:4px;
border-radius: 50%;
background-color: rgba(0,0,0,.5);
position: absolute;
top:62px;
transform-origin: 50%;
z-index: -1;
left:15%;
filter: blur(1px);
animation: shadow .5s alternate infinite ease;
}
#keyframes shadow{
0%{
transform: scaleX(1.5);
}
40%{
transform: scaleX(1);
opacity: .7;
}
100%{
transform: scaleX(.2);
opacity: .4;
}
}
.shadow:nth-child(4){
left: 45%;
animation-delay: .2s
}
.shadow:nth-child(5){
left:auto;
right:15%;
animation-delay: .3s;
}
.wrapper span{
position: absolute;
top:75px;
font-family: 'Lato';
font-size: 20px;
letter-spacing: 12px;
color: #fff;
left:15%;
}
<div id="background-loading">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<span>Loading</span>
</div>
</div>
Other content
I am using the template of AdminLTE 3, I have a div which I can increase its height thanks to Jquery-UI resizable, the problem is that when I try to increase the size of the div the page does not go down while I expand the div.
I do not want to put a scroll bar on the div, I just want to make that when I increase the height of the div, the page will also go down automatically with Jquery or CSS
Here is my code:
$(document).ready(function(){
$("#main_row_About_results").resizable({
handles: "s"
});
});
body {
margin: 0;
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #ffffff;
}
html,
body,
.wrapper {
min-height: 100%;
overflow-x: hidden;
}
.wrapper {
position: relative;
}
.layout-boxed .wrapper {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.layout-boxed .wrapper, .layout-boxed .wrapper:before {
margin: 0 auto;
max-width: 1250px;
}
#media (min-width: 768px) {
.content-wrapper,
.main-footer,
.main-header {
transition: margin-left 0.3s ease-in-out;
margin-left: 250px;
z-index: 3000;
}
}
#media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
.content-wrapper,
.main-footer,
.main-header {
transition: none;
}
}
#media (min-width: 768px) {
.sidebar-collapse .content-wrapper, .sidebar-collapse
.main-footer, .sidebar-collapse
.main-header {
margin-left: 0;
}
}
#media (max-width: 991.98px) {
.content-wrapper, .content-wrapper:before,
.main-footer,
.main-footer:before,
.main-header,
.main-header:before {
margin-left: 0;
}
}
.content-wrapper {
background: #f4f6f9;
}
.content-wrapper > .content {
padding: 0 0.5rem;
}
.main-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
}
.main-sidebar, .main-sidebar:before {
transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
width: 250px;
}
#media screen and (prefers-reduced-motion: reduce) {
.main-sidebar, .main-sidebar:before {
transition: none;
}
}
.sidebar-collapse .main-sidebar, .sidebar-collapse .main-sidebar:before {
margin-left: -250px;
}
#media (max-width: 991.98px) {
.main-sidebar, .main-sidebar:before {
box-shadow: none !important;
margin-left: -250px;
}
.sidebar-open .main-sidebar, .sidebar-open .main-sidebar:before {
margin-left: 0;
}
}
.main-footer {
padding: 15px;
color: #555;
border-top: 1px solid #dee2e6;
background: #ffffff;
}
.content-header {
padding: 15px 0.5rem;
}
.content-header h1 {
font-size: 1.8rem;
margin: 0;
}
.content-header .breadcrumb {
margin-bottom: 0;
padding: 0;
background: transparent;
line-height: 1.8rem;
}
.hold-transition .content-wrapper,
.hold-transition .main-header,
.hold-transition .main-footer {
transition: none !important;
}
/*
* Component: Main Header
* ----------------------
*/
.main-header {
z-index: 1000;
}
.main-header .navbar-nav .nav-item {
margin: 0;
}
.main-header .nav-link {
position: relative;
height: 2.5rem;
}
.main-header .navbar-nav[class*="-right"] .dropdown-menu {
margin-top: -3px;
right: 0;
left: auto;
}
#media (max-width: 575.98px) {
.main-header .navbar-nav[class*="-right"] .dropdown-menu {
left: 0;
right: auto;
}
}
.navbar-img {
height: 1.25rem;
width: auto;
}
.navbar-badge {
position: absolute;
top: 9px;
right: 5px;
font-size: .6rem;
font-weight: 300;
padding: 2px 4px;
}
.btn-navbar {
border-left-width: 0;
background-color: transparent;
}
.form-control-navbar {
border-right-width: 0;
}
.form-control-navbar + .input-group-append {
margin-left: 0;
}
.form-control-navbar,
.btn-navbar {
transition: none;
}
.navbar-dark .form-control-navbar,
.navbar-dark .btn-navbar {
background-color: rgba(255, 255, 255, 0.2);
border: 0;
}
.navbar-dark .form-control-navbar::placeholder,
.navbar-dark .form-control-navbar + .input-group-append > .btn-navbar {
color: rgba(255, 255, 255, 0.6);
}
.navbar-dark .form-control-navbar :-moz-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.navbar-dark .form-control-navbar ::-moz-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.navbar-dark .form-control-navbar :-ms-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.navbar-dark .form-control-navbar:focus,
.navbar-dark .form-control-navbar:focus + .input-group-append .btn-navbar {
border: 0 !important;
background-color: rgba(255, 255, 255, 0.6);
color: #343a40;
}
.navbar-light .form-control-navbar,
.navbar-light .btn-navbar {
background-color: #f2f4f6;
border: 0;
}
.navbar-light .form-control-navbar::placeholder,
.navbar-light .form-control-navbar + .input-group-append > .btn-navbar {
color: rgba(0, 0, 0, 0.6);
}
.navbar-light .form-control-navbar :-moz-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.navbar-light .form-control-navbar ::-moz-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.navbar-light .form-control-navbar :-ms-input-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.navbar-light .form-control-navbar:focus,
.navbar-light .form-control-navbar:focus + .input-group-append .btn-navbar {
border: 0 !important;
background-color: #e9ecef;
color: #343a40;
}
.brand-link {
padding: 0.8125rem 0.5rem;
font-size: 1.25rem;
display: block;
line-height: 1.5;
white-space: nowrap;
}
.brand-link:hover {
color: #ffffff;
text-decoration: none;
}
[class*="sidebar-dark"] .brand-link {
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid #4b545c;
}
[class*="sidebar-light"] .brand-link {
color: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #dee2e6;
}
.brand-image {
float: left;
line-height: .8;
max-height: 34px;
width: auto;
margin-left: .8rem;
margin-right: .5rem;
margin-top: -3px;
}
/**
* Component: Sidebar
* ------------------
*/
.main-sidebar {
z-index: 1100;
height: 100vh;
overflow-y: hidden;
}
.sidebar {
padding-bottom: 0;
padding-top: 0;
padding-left: 0.5rem;
padding-right: 0.5rem;
overflow-y: auto;
height: calc(100% - 4rem);
}
.user-panel {
position: relative;
}
[class*="sidebar-dark"] .user-panel {
border-bottom: 1px solid #4f5962;
}
[class*="sidebar-light"] .user-panel {
border-bottom: 1px solid #dee2e6;
}
.user-panel,
.user-panel .info {
overflow: hidden;
white-space: nowrap;
}
.user-panel .image {
padding-left: 0.8rem;
display: inline-block;
}
.user-panel img {
width: 2.1rem;
height: auto;
}
.user-panel .info {
display: inline-block;
padding: 5px 5px 5px 10px;
}
.user-panel .status,
.user-panel .dropdown-menu {
font-size: 0.875rem;
}
.nav-sidebar .nav-item > .nav-link {
margin-bottom: 0.2rem;
}
.nav-sidebar .nav-item > .nav-link .right {
transition: transform ease-in-out 0.3s;
}
#media screen and (prefers-reduced-motion: reduce) {
.nav-sidebar .nav-item > .nav-link .right {
transition: none;
}
}
.nav-sidebar .nav-link > p > .right {
position: absolute;
right: 1rem;
top: 12px;
}
.nav-sidebar .menu-open > .nav-treeview {
display: block;
}
.nav-sidebar .menu-open > .nav-link .right {
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.nav-sidebar > .nav-item {
margin-bottom: 0;
}
.nav-sidebar > .nav-item .nav-icon {
text-align: center;
width: 1.6rem;
font-size: 1.2rem;
margin-right: .2rem;
}
.nav-sidebar > .nav-item .float-right {
margin-top: 3px;
}
.nav-sidebar .nav-treeview {
display: none;
list-style: none;
padding: 0;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon {
width: 1.6rem;
}
.nav-sidebar .nav-header {
font-size: .9rem;
padding: 0.5rem;
}
.nav-sidebar .nav-header:not(:first-of-type) {
padding: 1.7rem 1rem .5rem 1rem;
}
.nav-sidebar .nav-link p {
display: inline-block;
margin: 0;
}
#sidebar-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
background-color: rgba(0, 0, 0, 0.1);
z-index: 1099;
}
#blogArea
{
margin-left: 0;
/*width: 80px !important;*/
min-height: 967px;
max-width: 80px !important;
width: 80px !important;
min-width: 80px !important;
}
#blogAreaContent
{
max-width: 80px !important;
width: 80px !important;
min-width: 80px !important;
}
#main_row_About_results
{
border: 1px solid rgb(112, 113, 124);
border-style: dashed;
}
p:focus, h2:focus, h3:focus, a:focus
{
outline: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Amin bilding</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
Summery
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="main.php" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">ADMINS</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
Administrator Recons
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview">
<a href="#" class="nav-link active">
<i class="nav-icon fa fa-dashboard"></i>
<p>
Dashboard
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="summery.php" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Admin Options</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Title</h1>
</div><!-- /.col -->
<br><br><br>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right" style="margin-right: 14.6%;"><!-- style="margin-right: 12%;" -->
<li class="breadcrumb-item">My Breadcrum</li>
</ol>
</div><!-- /.col -->
<div class="col-sm-12 col-lg-12 col-md-12 col-xs-12" style="max-width: 92.5%; width: 92.5%;"> <!--style="max-width: 94%; width: 94%;"-->
<h5>Title Item: <b>(*)</b> </h5>
<input type="text" name="blog_nameInfo" id="blog_nameInfo" class="form-control" required>
<br>
<br>
</div>
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row" id="main_row_for_blogs">
<div class="col-lg-12 col-12" style="max-width: 92.5%; width: 92.5%;"><!--style="max-width: 94%; width: 94%;"-->
<div class="card" id="BlogEditorOptions">
<div class="card-header">
<h2>my title card</h2>
</div>
<div class="card-body" id="main_container_blog_section">
<div class="row" id="main_row_About_results" style="display: block; position: relative !important; width: 100%; margin-left: 0px; padding-top: 20px; padding-bottom: 20px;">
<!--this is the div that it's resizable-->
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<strong>Copyright © 2018 - MyBildingWall</strong>
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 1.0
</div>
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="dist/js/adminlte.js"></script>
</body>
</html>
As you can see when trying to put the div with id = main_row_About_results higher using jquery resizable ui the body does not automatically download. I just want that as long as I'm setting the div higher, the body will also go down (scrolling) automatically with the div. Right now that does not happen. How Can I do that?
You'll need to adjust the scrollTop as you resize. There are a number of ways to do this. Here is one example:
resize: function(event, ui){
var rh = Math.round(ui.element.offset().top + ui.size.height);;
var wh = $(window).height();
var sp = $(document).scrollTop();
var buff = wh + sp - 50;
if (rh > buff) {
$(document).scrollTop(rh - wh + 50);
}
}
Calculating the Offset position and the current height of the resizable gives us a proper number of the mouse position in the document. Scroll Top and Window height gives us a good number to compare against. We add a bit of a buffer, 50 pixels, that can be adjusted as desired.
Once the condition is met, we move the Scroll Top using .scrollTop().
Working Example
$(function() {
$("#main_row_About_results").resizable({
handles: "s",
resize: function(e, ui) {
var rh = Math.round(ui.element.offset().top + ui.size.height);;
var wh = $(window).height();
var sp = $(document).scrollTop();
var buff = wh + sp - 50;
if (rh > buff) {
$(document).scrollTop(rh - wh + 50);
}
}
});
});
body {
margin: 0;
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #ffffff;
}
html,
body,
.wrapper {
min-height: 100%;
overflow-x: hidden;
}
.wrapper {
position: relative;
}
.layout-boxed .wrapper {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.layout-boxed .wrapper,
.layout-boxed .wrapper:before {
margin: 0 auto;
max-width: 1250px;
}
#media (min-width: 768px) {
.content-wrapper,
.main-footer,
.main-header {
transition: margin-left 0.3s ease-in-out;
margin-left: 250px;
z-index: 3000;
}
}
#media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
.content-wrapper,
.main-footer,
.main-header {
transition: none;
}
}
#media (min-width: 768px) {
.sidebar-collapse .content-wrapper,
.sidebar-collapse .main-footer,
.sidebar-collapse .main-header {
margin-left: 0;
}
}
#media (max-width: 991.98px) {
.content-wrapper,
.content-wrapper:before,
.main-footer,
.main-footer:before,
.main-header,
.main-header:before {
margin-left: 0;
}
}
.content-wrapper {
background: #f4f6f9;
}
.content-wrapper>.content {
padding: 0 0.5rem;
}
.main-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
}
.main-sidebar,
.main-sidebar:before {
transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
width: 250px;
}
#media screen and (prefers-reduced-motion: reduce) {
.main-sidebar,
.main-sidebar:before {
transition: none;
}
}
.sidebar-collapse .main-sidebar,
.sidebar-collapse .main-sidebar:before {
margin-left: -250px;
}
#media (max-width: 991.98px) {
.main-sidebar,
.main-sidebar:before {
box-shadow: none !important;
margin-left: -250px;
}
.sidebar-open .main-sidebar,
.sidebar-open .main-sidebar:before {
margin-left: 0;
}
}
.main-footer {
padding: 15px;
color: #555;
border-top: 1px solid #dee2e6;
background: #ffffff;
}
.content-header {
padding: 15px 0.5rem;
}
.content-header h1 {
font-size: 1.8rem;
margin: 0;
}
.content-header .breadcrumb {
margin-bottom: 0;
padding: 0;
background: transparent;
line-height: 1.8rem;
}
.hold-transition .content-wrapper,
.hold-transition .main-header,
.hold-transition .main-footer {
transition: none !important;
}
/*
* Component: Main Header
* ----------------------
*/
.main-header {
z-index: 1000;
}
.main-header .navbar-nav .nav-item {
margin: 0;
}
.main-header .nav-link {
position: relative;
height: 2.5rem;
}
.main-header .navbar-nav[class*="-right"] .dropdown-menu {
margin-top: -3px;
right: 0;
left: auto;
}
#media (max-width: 575.98px) {
.main-header .navbar-nav[class*="-right"] .dropdown-menu {
left: 0;
right: auto;
}
}
.navbar-img {
height: 1.25rem;
width: auto;
}
.navbar-badge {
position: absolute;
top: 9px;
right: 5px;
font-size: .6rem;
font-weight: 300;
padding: 2px 4px;
}
.btn-navbar {
border-left-width: 0;
background-color: transparent;
}
.form-control-navbar {
border-right-width: 0;
}
.form-control-navbar+.input-group-append {
margin-left: 0;
}
.form-control-navbar,
.btn-navbar {
transition: none;
}
.navbar-dark .form-control-navbar,
.navbar-dark .btn-navbar {
background-color: rgba(255, 255, 255, 0.2);
border: 0;
}
.navbar-dark .form-control-navbar::placeholder,
.navbar-dark .form-control-navbar+.input-group-append>.btn-navbar {
color: rgba(255, 255, 255, 0.6);
}
.navbar-dark .form-control-navbar :-moz-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.navbar-dark .form-control-navbar ::-moz-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.navbar-dark .form-control-navbar :-ms-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.navbar-dark .form-control-navbar:focus,
.navbar-dark .form-control-navbar:focus+.input-group-append .btn-navbar {
border: 0 !important;
background-color: rgba(255, 255, 255, 0.6);
color: #343a40;
}
.navbar-light .form-control-navbar,
.navbar-light .btn-navbar {
background-color: #f2f4f6;
border: 0;
}
.navbar-light .form-control-navbar::placeholder,
.navbar-light .form-control-navbar+.input-group-append>.btn-navbar {
color: rgba(0, 0, 0, 0.6);
}
.navbar-light .form-control-navbar :-moz-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.navbar-light .form-control-navbar ::-moz-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.navbar-light .form-control-navbar :-ms-input-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.navbar-light .form-control-navbar:focus,
.navbar-light .form-control-navbar:focus+.input-group-append .btn-navbar {
border: 0 !important;
background-color: #e9ecef;
color: #343a40;
}
.brand-link {
padding: 0.8125rem 0.5rem;
font-size: 1.25rem;
display: block;
line-height: 1.5;
white-space: nowrap;
}
.brand-link:hover {
color: #ffffff;
text-decoration: none;
}
[class*="sidebar-dark"] .brand-link {
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid #4b545c;
}
[class*="sidebar-light"] .brand-link {
color: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #dee2e6;
}
.brand-image {
float: left;
line-height: .8;
max-height: 34px;
width: auto;
margin-left: .8rem;
margin-right: .5rem;
margin-top: -3px;
}
/**
* Component: Sidebar
* ------------------
*/
.main-sidebar {
z-index: 1100;
height: 100vh;
overflow-y: hidden;
}
.sidebar {
padding-bottom: 0;
padding-top: 0;
padding-left: 0.5rem;
padding-right: 0.5rem;
overflow-y: auto;
height: calc(100% - 4rem);
}
.user-panel {
position: relative;
}
[class*="sidebar-dark"] .user-panel {
border-bottom: 1px solid #4f5962;
}
[class*="sidebar-light"] .user-panel {
border-bottom: 1px solid #dee2e6;
}
.user-panel,
.user-panel .info {
overflow: hidden;
white-space: nowrap;
}
.user-panel .image {
padding-left: 0.8rem;
display: inline-block;
}
.user-panel img {
width: 2.1rem;
height: auto;
}
.user-panel .info {
display: inline-block;
padding: 5px 5px 5px 10px;
}
.user-panel .status,
.user-panel .dropdown-menu {
font-size: 0.875rem;
}
.nav-sidebar .nav-item>.nav-link {
margin-bottom: 0.2rem;
}
.nav-sidebar .nav-item>.nav-link .right {
transition: transform ease-in-out 0.3s;
}
#media screen and (prefers-reduced-motion: reduce) {
.nav-sidebar .nav-item>.nav-link .right {
transition: none;
}
}
.nav-sidebar .nav-link>p>.right {
position: absolute;
right: 1rem;
top: 12px;
}
.nav-sidebar .menu-open>.nav-treeview {
display: block;
}
.nav-sidebar .menu-open>.nav-link .right {
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.nav-sidebar>.nav-item {
margin-bottom: 0;
}
.nav-sidebar>.nav-item .nav-icon {
text-align: center;
width: 1.6rem;
font-size: 1.2rem;
margin-right: .2rem;
}
.nav-sidebar>.nav-item .float-right {
margin-top: 3px;
}
.nav-sidebar .nav-treeview {
display: none;
list-style: none;
padding: 0;
}
.nav-sidebar .nav-treeview>.nav-item>.nav-link>.nav-icon {
width: 1.6rem;
}
.nav-sidebar .nav-header {
font-size: .9rem;
padding: 0.5rem;
}
.nav-sidebar .nav-header:not(:first-of-type) {
padding: 1.7rem 1rem .5rem 1rem;
}
.nav-sidebar .nav-link p {
display: inline-block;
margin: 0;
}
#sidebar-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
background-color: rgba(0, 0, 0, 0.1);
z-index: 1099;
}
#blogArea {
margin-left: 0;
/*width: 80px !important;*/
min-height: 967px;
max-width: 80px !important;
width: 80px !important;
min-width: 80px !important;
}
#blogAreaContent {
max-width: 80px !important;
width: 80px !important;
min-width: 80px !important;
}
#main_row_About_results {
border: 1px solid rgb(112, 113, 124);
border-style: dashed;
}
p:focus,
h2:focus,
h3:focus,
a:focus {
outline: none !important;
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
Summery
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="main.php" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">ADMINS</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
Administrator Recons
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview">
<a href="#" class="nav-link active">
<i class="nav-icon fa fa-dashboard"></i>
<p>
Dashboard
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="summery.php" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Admin Options</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Title</h1>
</div>
<!-- /.col -->
<br><br><br>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right" style="margin-right: 14.6%;">
<!-- style="margin-right: 12%;" -->
<li class="breadcrumb-item">My Breadcrum</li>
</ol>
</div>
<!-- /.col -->
<div class="col-sm-12 col-lg-12 col-md-12 col-xs-12" style="max-width: 92.5%; width: 92.5%;">
<!--style="max-width: 94%; width: 94%;"-->
<h5>Title Item: <b>(*)</b> </h5>
<input type="text" name="blog_nameInfo" id="blog_nameInfo" class="form-control" required>
<br>
<br>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row" id="main_row_for_blogs">
<div class="col-lg-12 col-12" style="max-width: 92.5%; width: 92.5%;">
<!--style="max-width: 94%; width: 94%;"-->
<div class="card" id="BlogEditorOptions">
<div class="card-header">
<h2>my title card</h2>
</div>
<div class="card-body" id="main_container_blog_section">
<div class="row" id="main_row_About_results" style="display: block; position: relative !important; width: 100%; margin-left: 0px; padding-top: 20px; padding-bottom: 20px;">
<!--this is the div that it's resizable-->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<strong>Copyright © 2018 - MyBildingWall</strong>
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 1.0
</div>
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="dist/js/adminlte.js"></script>
Hope that helps.
My problem is that CSS styles are applied only for the first PHP loop iteration. PHP loop outputs Wordpress posts. I've inspected the page structure and saw that it objects have the needed structure (blocks and classes), but CSS is not applied to them except for the first one.
<div id="events-feed">
<div class="container">
<div class="sym rose"></div>
<div class="title-wrapper">
<div class="title-wrap">
<div class="line"></div>
<div class="title">Наши события</div>
<div class="line"></div>
</div>
</div>
<?php
$args = array(
'posts_per_page'=> 5,
'orderby' => 'comment_count',
'category_name=events' );
$q = new WP_Query($args);
if($q->have_posts()) {
while($q->have_posts()){ $q->next_post();
$post_id = $q->post->ID;
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ) );
$title = get_the_title($post_id);
$date = get_the_date('d.m.Y', $post_id);
$content = get_post_field('post_content', $post_id);
?>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header">
<?php echo $title; ?> </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title">
<?php echo $date; ?> </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
<?php echo $content; ?>
</div>
</div>
</div>
</div>
<?php } } wp_reset_postdata(); ?>
The Styles & HTML are:
#events-feed {
background-color: #F9F6EB;
padding-top: 0.1px
}
#events-feed .title-wrapper {
padding: 20px 0;
position: relative;
text-align: center;
font-family: "PT Serif", serif;
padding: 0 50px;
margin-bottom: 65px
}
#events-feed .title-wrapper .title-wrap div {
display: inline-block;
vertical-align: middle
}
#events-feed .title-wrapper .title-wrap .line {
background: #0E0304;
height: 1px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
width: 15%;
z-index: 99
}
#events-feed .title-wrapper .title-wrap .title {
background-color: #F9F6EB;
color: #0E0304;
font-size: 40px;
padding: 0 20px;
text-transform: uppercase;
z-index: 999
}
#events-feed .event-article {
background-color: #fff;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
color: #0E0304;
height: 1000px;
margin: 0 10% 100px;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)
}
#events-feed .event-article .events-post .post-img {
background-color: grey;
background-size: cover;
max-width: 2000px;
padding-top: 48%
}
#events-feed .event-article .events-post .post-header {
margin-top: 40px;
font-size: 34px;
text-transform: uppercase
}
#events-feed .event-article .events-post .post-date {
padding: 20px 0;
position: relative;
text-align: center;
margin-bottom: 30px
}
#events-feed .event-article .events-post .post-date .title-wrap div {
display: inline-block;
vertical-align: middle
}
#events-feed .event-article .events-post .post-date .title-wrap .line {
background: #7D8082;
height: 1px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
width: 15%;
z-index: 99
}
#events-feed .event-article .events-post .post-date .title-wrap .title {
background-color: #fff;
color: #7D8082;
font-size: 20px;
padding: 0 20px;
text-transform: capitalize;
z-index: 999
}
#events-feed .event-article .desc {
font-size: 20px;
margin: 0 50px
}
#events-feed .event-article .desc p {
margin-bottom: 27px
}
#events-feed .event-article .desc ul {
margin: 0 0 27px 40px;
text-align: left
}
.line {
height: 1px
}
<div id="events-feed" style="margin-top: 160px;">
<div class="container">
<div class="sym rose"></div>
<div class="title-wrapper">
<div class="title-wrap">
<div class="line"></div>
<div class="title">Наши события</div>
<div class="line"></div>
</div>
</div>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header"> День рождения ElRumbo </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title"> 18.08.2015 </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
18.08.2015 мы празднуем день рождения! В этот день с 19:00 мы принимаем гостей только по предзаказу столика. И подарки будем дарить мы!
<ul>
<li>Праздничная лотерея</li>
<li>Скидка 20%</li>
<li>Бокал вина в подарок каждому</li>
</ul>
В 21:45 фаер-шоу от творческой группы "FaBula" Будем рады быть вместе с вами в наш праздничный вечер!
<strong>Подробности при заказе столика.</strong>
</div>
</div>
</div>
</div>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header"> День святого Валентина </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title"> 14.02.2016 </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
Dias de los Enamorados 14 февраля - День Святого Валентина В этот вечер по предзаказу столика вас ждут:
<ul>
<li>Скидка 20% на коктейли группы "Мартини"</li>
<li>Праздничная лотерея</li>
<li>Особый коктейль, которого нет в меню</li>
</ul>
</div>
</div>
Thanks to Mr. or Mrs. FlyffyKitten I found the solution:
I had to move the least two closing tags out of the loop since they refer to parent elements of the looped objects. Sorry for disturbing everyone. Thank you for being helpful!
So Im working on a project for a client and ran into an issue with Border-Radius + Bootstrap,
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is after adding bootstrap to make it more responsive on mobile, well after doing that this is what the top now looks like;
This is what it looks like when I remove the Bootstrap code;
This is the code with out bootstrap on the image
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is my css
/* Top Header */
.header {
padding-top: 1.5em;
border-top: solid .3em rgba(46, 204, 113, 1.0);
}
.top-nav {
margin-top: 1.2em;
margin-right: auto;
margin-bottom: .8em;
margin-left: auto;
width: 30em;
}
.logo {
float: left;
width: 5em;
height: 5em;
border: solid .1em rgba(46, 204, 113, 1.0);
border-radius: 50%;
}
.social-media-top {
float: right;
padding-bottom: 1em;
}
.social-media-top h1 {
margin: 0;
padding: 0;
color: #41eb71;
font-weight: 100;
font-size: 2em;
align-content: center;
}
.social-media-top h1 span {
color: #41eb71;
text-transform: capitalize;
font-weight: 600;
}
.social-media-top li {
display: inline-block;
}
.social-media-top li i {
display: inline-block;
width: 2em;
height: 2em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(46, 204, 113, 1.0);
color: white;
text-align: center;
line-height: 2em;
}