I have an app with a Leaflet.js map and a sidebar. On the desktop, it appears to look fine, but when I run page inspector and select a mobile version, there is whitespace at the bottom of the page(outside of the map/sidebar), along with an odd grey box.
I cannot inspect either the whitespace or the grey box when I mouseover them with the pointer. I have tried changing the body CSS to no avail (including no bottom margin/padding for the body).
I am a bit mystified here. Here's the basic HTML structure:
<body>
<!-- links to scripts go here -->
<!-- Content Starts here -->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<div class="filterContainer">
<!-- filter map data with radio buttons here -->
</div>
<div class="filterContainer">
<!-- filter map data with radio buttons here -->
</div>
</div>
<!-- filter map data with calendar -->
<div id="datepicker"></div>
</nav>
<!-- Page Content -->
<div id="content">
<!-- map -->
<div id="map" style="min-width: 100vh; min-height: 100vh">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<span>Filter Events</span>
</button>
</div>
</div>
</div>
<script>
</script>
And, some of the relevant CSS:
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
height:100%;
max-height:100%;
overflow: hidden;
padding-bottom: 1px;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
}
.filterContainer ul{
list-style: none;
margin: 0;
margin-top: -12%;
margin-left: -12%;
}
#content{
width:100%;
height:100%;
}
#map{
height:100%;
}
And, finally, an image of the problem:
Related
I am developing a project for school and I am pretty new to Bootstrap and I keep having some problems with scaling the website for different resolutions. When I change it to mobile the images go on top of the text. If anybody could help me I would appreciate it.
I have tried everything and still cant find a solution.
<body>
<div class="container">
<nav class="navbar-fixed-top sticky-top navbar" style="width: 100%; background-color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<div class="navbar-header">
<a class="navbar-brand"><img src="transferir.png" alt="" style="height: 65; width: 60px"></a>
</div>
<div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contacta-nos</li>
</ul>
</div>
</nav>
<div class="site-index">
<div id="home" class="block home-block">
<div class="container">
<div class="col-sm-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" class="d-img">
<img src="appstore.png" alt="Apple App Store" class="d-img">
</div>
</div>
<div class="col-sm-5 right-block">
<img src="phones.png" style="height: 350px; float: right; vertical-align: middle; width: auto !important; position: relative">
</div>
</div>
<hr class="sombra">
</div>
</div>
Css
html{
scroll-behavior: smooth;
}
body{
padding-top: 1%;
font-family: 'Lato', sans-serif;
}
.block{
padding: 35px;
}
.home-block{
min-height: calc(100vh - 90px);
}
#home .container{
height: 500px;
}
.left-block{
text-align: center;
top: 30%;
}
.right-block{
bottom: 35%;
margin-left: 25%;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Desktop
When i squish the page
First of all, you probably forgot to include <div class="row"></div> wrapper inside your <div class="container">...</div> element, just as it says here.
Secondly, I strongly recommend you to not play too much with CSS properties such as position: relative/absolute, top: ...; left: ...; right: ...; bottom: ..., because most of them break the CSS native document flow and they should be used only when other tools do not help much.
I suggest you reading this series of articles if you have enough time: CSS layout
I turned off most of the properties of that kind and it already looks much nicer:
This answer would be just be a massive advice if I wouldn't provide some code help, so here it is.
Start by disabling these properties in DevTools:
.home-block{
/* min-height: calc(100vh - 90px); */
}
#home .container{
/* height: 500px; */
}
.left-block{
/* text-align: center; */
/* top: 30%; */
}
.right-block{
/* bottom: 35%; */
/* margin-left: 25%; */
}
Fixing Bootstrap markup:
<div id="home" class="block home-block">
<div class="container">
<!-- Added this wrapper, changed .col-* classes to responsive -->
<div class="row">
<!-- Removed .left-block class -->
<div class="col-sm-12 col-lg-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" style="height: 40px;">
<img src="appstore.png" alt="Apple App Store" style="height: 40px">
</div>
</div>
<!-- Removed .right-block class, added .text-centered class -->
<div class="col-sm-12 col-lg-6 text-centered">
<!-- Removed inline styles (bad practice), changed "height" to be an attribute -->
<img src="phones.png" height="350">
</div>
</div>
</div>
</div>
Then you would get this picture (no interval between image and the button on the top):
This one is solved by applying margin-top: ...px; to the image block, wrapped in #media query at .col-md-* resolutions and lower. For the exact values see Bootstrap grid options. For more info on applying #media queries see MDN docs
As for navigation bar, I first suggest you disabling padding-left on ul#menu element:
#menu {
padding-left: 0;
}
Although it fixes it on sm resolutions, the navigation menu still wraps under the logo on resolutions less than about 520px. I suggest you imagine what to do with this occasion in your mind or in some markup service like https://app.diagrams.net/ and then develop what you decided to.
You can use
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
See this and this
I have 2 different divs with different parents and I would like to make them the height of the tallest one.
I managed that with the following code:
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
the html:
<div class="contact-information">
<div class="centered" id="right">
<h3>INFORMATII</h3>
<p>Strada</p>
<div class="social-icons-wrapper">
....
</div><!-- social-icons-wrapper -->
</div><!-- centered -->
</div><!-- contact-information -->
<div class="contact-box">
<div class="width-for-centering" id="left">
<div class="contact-title">
<h3>CONTACTEAZA-NE!</h3>
<p>Completeaza</p>
</div><!-- contact-title -->
<div class="tocenter" data-aos="zoom-out">
<?php echo do_shortcode('[contact-form-7 id="63" title="formular"]'); ?>
</div><!-- tocenter -->
</div><!-- width-for-centering -->
</div><!-- contact-box -->
And the css
#right{
width:400px;
height: auto;
overflow: hidden;
position: relative;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
#left{
width:600px;
height: auto;
overflow: hidden;
z-index: 1;
padding-bottom: 0;
position: relative;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
This works, both divs now have the same height, my problem is that they are taller than they should be. Left's children only add up to about 600px in height, but left has 737px in height now.
I found that the problem could be the script above because when I delete it, left does take the height of it's children.
The only problem I see is with your CSS. Specifically with the position:absolute; and transform.
Look at this fiddle where I used your code without CSS: https://jsfiddle.net/g0utu4bz/
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
Its pretty easy with flexbox, you could do something like this:
.wrapper {
display: flex;
}
#right{
width:400px;
background-color: red;
}
#left{
width:600px;
background-color: blue;
}
<div class="wrapper">
<div class="contact-information" id="right">
<div class="centered">
<h3>INFORMATII</h3>
<p>Strada</p>
<div class="social-icons-wrapper">
....
</div><!-- social-icons-wrapper -->
</div><!-- centered -->
</div><!-- contact-information -->
<div class="contact-box" id="left">
<div class="width-for-centering">
<div class="contact-title">
<h3>CONTACTEAZA-NE!</h3>
<p>Completeaza</p>
</div><!-- contact-title -->
<div class="tocenter" data-aos="zoom-out">
</div><!-- tocenter -->
</div><!-- width-for-centering -->
</div><!-- contact-box -->
</div>
I've edited the content using flex-box and media queries, in order to match the request... and i've added some css to be a litte more mobile-friendly (but is only a little optimization, your layout need some more work ;) )
I hope that this will be helpful!
P.s. expand the snipped ("run code" -> "full page") to see correcty how media queries works, otherwise you'll see only 1 column!
.left-right-container {
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
/* this rules will be used only on devices with large screen, to make the layout a little bit more responsive */
.left-right-container {
flex-direction: row;
}
.left-right-container .left {
width: 600px;
}
.left-right-container .right {
width: 400px;
}
.left-right-container .last {
min-height: 50px; /* as many as you need to show socials */
}
}
.left-right-container .left, .left-right-container .right {
height: 100%;
display: flex;
flex-direction: column;
}
.left-right-container .left {
background: green;
}
.left-right-container .right {
background: red;
}
.left-right-container .left > *, .left-right-container .right > * {
flex-grow: 0;
}
.left-right-container .left > .take-all, .left-right-container .right > .take-all {
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-right-container">
<div class="contact-information">
<div class="centered right">
<h3>INFORMATII</h3>
<p>Strada</p>
<div class="social-icons-wrapper take-all">
1<br>2<br>3<br>4<br>5<br>6
</div>
<div class="last">other content</div>
</div><!-- centered -->
</div><!-- contact-information -->
<div class="contact-box">
<div class="width-for-centering left">
<h3>CONTACTEAZA-NE!</h3>
<p>Completeaza</p>
<div class="tocenter take-all" data-aos="zoom-out">
1<br>2<br>3
</div>
<div class="last">other content</div>
</div><!-- width-for-centering -->
</div><!-- contact-box -->
</div>
I am trying to make just the pages on my website that have the main body content class of ".interior-health-main" have a footer that is static at the bottom of the page. I want it at the absolute bottom, currently if you view some of my pages on a large screen, you will see a bunch of white space after the footer. I want to get rid of this.
I have been looking into this for hours now and tried many things, at first I was going to make the footer on the entire website static at the bottom of the page, but setting the footer's css to position: absolute conflicted with other elements on my home page, which is why I just want it on the ".interior-health-main." If it is possible to change it just for the footers on these pages please let me know, I do not really want examples of fixing this by setting the entire body to position:relative. It just messes up my homepage.
Here is an example of what it looks like with the white space after the footer http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Health Resources</li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark">
<img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo">
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p>Human Health</p>
<div class="line"></div>
<p>Pet Diseases</p>
<div class="line"></div>
<p>Livestock Diseases</p>
<div class="line"></div>
<p>Events</p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners & Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. Site Map.</h6>
</div>
<div class="col-xs-3">
<img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon">
<img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon">
</div>
</div>
</div>
</div>
Here is my css
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
#media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}
You can position the footer absolute like they did here
https://getbootstrap.com/examples/sticky-footer/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* background-color: #f5f5f5; */
}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
How did it conflict when you tried your way? update your post with what you did?
Please reference this question to find your solution.
I applied one of the solutions from the above link to your code.
Wrap your code in a #holder div.
Add the following CSS:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 300px; /* height of footer */
}
Here is the working fiddle:
https://jsfiddle.net/DTcHh/25475/
I wrapped your page (not containing footer) into .page-wrap div, and edit you codePen code and just add this piece of code to your css
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height (with margin and border) */
margin-bottom: -299px ;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
/* page-wrap after content must be the same height as footer */
height: 299px;
}
Demo
I'm using the js from bootstrap to do a div collapse on a Wordpress gallery page but I can't get the toggle function to work. When you click on another item, the first item doesn't collapse. It stays open. You can see it the link to the dev site: Dev site link
I'm not using the accordion bootstrap setup as I wanted each collapsing div to occupy the same space below the row of triggering links.
I've asked this question from a bootstrap point of view but got no answers. So I'm wondering if there's a way of doing it using Jquery toggleclass?
Bootstrap applies the class 'in' to the expanded item. So I guess I'd need to have toggle class remove that? I found and tried to adapt some Jquery but no luck.
A simplified version of the code is:
<div id="desktop-view">
<div id="gallery-squares-1" class="gallery-squares clearfix">
<a href="#collapseExample-1" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
<div class="img-mouse-over"></div>
</a><!-- .post-gallery-img -->
<a href="#collapseExample-2" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
<div class="img-mouse-over"></div>
</a><!-- .post-gallery-img -->
<a href="#collapseExample-3" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
<div class="img-mouse-over"></div>
</a><!-- .post-gallery-img -->
</div> <!-- .gallery-squares -->
<div id="gallery-expanders-1" class="gallery-expanders clearfix">
<div class="collapse" id="collapseExample-1">
<div class="gallery-content">
<div class="ie-bgsize gallery-content-img"></div>
<h6>Title</h6>
<p>Description</p>
</div> <!-- .gallery-content -->
</div> <!-- .collapse -->
<div class="collapse" id="collapseExample-2">
<div class="gallery-content">
<div class="ie-bgsize gallery-content-img"></div>
<h6>Title</h6>
<p>Description</p>
</div> <!-- .gallery-content -->
</div> <!-- .collapse -->
<div class="collapse" id="collapseExample-3">
<div class="gallery-content">
<div class="ie-bgsize gallery-content-img"></div>
<h6>Title</h6>
<p>Description</p>
</div> <!-- .gallery-content -->
</div> <!-- .collapse -->
</div> <!-- .gallery-expanders -->
</div>
CSS:
a.gallery-img {
width: 15%;
padding-bottom: 15%;
margin: 0 1.6666666% 1.6666666% 0;
display: block;
float: left;
position: relative;
background-color: #fff;
}
.gallery-content {
background-color: black;
margin-bottom: 1.6666666%;
color: #fff;
padding: 1.6666666%;
}
.gallery-content-img {
width: 98.5%;
padding-bottom: 50%;
margin-bottom: 1.8%;
}
.gallery-content h6 {
color: #fff;
font-size: 18px;
line-height: 1.2em;
margin: 0;
width: 98.5%;
}
.gallery-content p {
font-size: 14px;
line-height: 1.2em;
margin: 1% 0;
width: 98.5%;
}
.gallery-content p:last-child {
margin-bottom: 0;
}
.img-mouse-over {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
background: none;
}
.img-mouse-over:hover,
.img-mouse-over:active {
background: rgba(0, 0, 0, 0.5) no-repeat center center;
}
JQuery I tried:
$('.gallery-squares a').click(function(e){
e.preventDefault();
$('.collapse').removeClass('in');
});
I just can't get it to remove the active class on 'in'. I guess I'd also need to make sure it only removed the 'in' from the current active div and not the one that the click will create?
Thanks in advance for any advice.
you'll have to remove the in class and add the collapse class.
$(document).on('show.bs.collapse', function () {
$('.in').addClass('collapse').removeClass('in');
})
Okay, so if we never want the in class there...
$(document).on('shown.bs.collapse', function () {
$('.in').removeClass('in');
})
or possibly on the 'show event:
$(document).on('show.bs.collapse', function () {
$('.in').removeClass('in');
})
(I'm not sure which one since I don't know when it adds the class in)
See the docs for the collapse events here
So I'm using this "Color Admin Responsive Admin Template" (http://wrapbootstrap.com/preview/WB0N89JMK) and I have a sidebar menu, and I have the expand/collapse button displaying, but the actual function is not working. I'm not sure exactly why it isn't working, I got the function from the template. I'm pretty new to JavaScript but I think everything that I needed to change on my specific HTML matches the function.
HTML
<!--sidebar left start-->
<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
<!-- begin sidebar scrollbar -->
<div data-scrollbar="true" data-height="100%">
<!-- begin sidebar user -->
<ul class="nav">
<li class="nav-profile">
<div class="info">
Matt Smith
<small>Manager</small>
</div>
</li>
</ul>
<!-- end sidebar user -->
<ul class="nav">
<!-- begin sidebar minify button -->
<li><i class="fa fa-angle-double-left"></i></li>
<!-- end sidebar minify button -->
</ul>
</div>
<!-- end sidebar scrollbar -->
</div>
<!--sidebar left end-->
JavaScript
var handleSidebarMinify = function() {
$('[data-click=sidebar-minify]').click(function(e) {
e.preventDefault();
var sidebarClass = 'page-sidebar-minified';
var targetContainer = '#page-container';
if ($(targetContainer).hasClass(sidebarClass)) {
$(targetContainer).removeClass(sidebarClass);
if ($(targetContainer).hasClass('page-sidebar-fixed')) {
generateSlimScroll($('#sidebar [data-scrollbar="true"]'));
}
} else {
$(targetContainer).addClass(sidebarClass);
if ($(targetContainer).hasClass('page-sidebar-fixed')) {
$('#sidebar [data-scrollbar="true"]').slimScroll({destroy: true});
$('#sidebar [data-scrollbar="true"]').removeAttr('style');
}
// firefox bugfix
$('#sidebar [data-scrollbar=true]').trigger('mouseover');
}
$(window).trigger('resize');
});
};
http://jsfiddle.net/BootstrapOrBust/71og00ev/1/
You do not include jQuery library in your html. I've added check for JQuery at the top of your code:
alert(typeof jQuery !== "undefined")
it returns false that means you don't add JQuery. You can see the Uncaught ReferenceError: $ is not defined error on browser console. Updated JSFiddle
You can do this (without an animation) without any javascript at all, using the css's :hover.
EDIT: I just realised you wanted to control the expansion and collapse with buttons. This answer doesn't address that, but I'll leave it here anyway as an alternative.
JSFiddle: http://jsfiddle.net/2byg62z4/
<style>
body { margin: 0; }
#sidepanel
{
position: absolute;
min-width: 30px;
height: 60%;
top: 20%;
left: 0;
}
#bar
{
display: table;
background-color: #999999;
color: white;
width: 30px;
height: 100%;
text-align: center;
}
#bar div
{
display: table-cell;
vertical-align: middle;
}
#panel
{
display: none;
background-color: #999999;
color: white;
width: 300px;
height: 100%;
text-align: center;
}
#panel div
{
display: table-cell;
vertical-align: middle;
}
#sidepanel:hover #bar { display: none; }
#sidepanel:hover #panel { display: table; }
</style>
<div id='sidepanel'>
<div id='bar'>
<div>
><br>><br>>
</div>
</div>
<div id='panel'>
<div>
stuff
</div>
</div>
</div>