PureCSS.io menu & Leaflet page height - css

I'm trying to create a fullscreen map with leaflet and a purecss horizontal menu on top of it.
Here is a solution for making the map height 100% (set parent elements also to 100% height).
So right now, I've got something like this:
<!-- Menu -->
<div class="pure-menu pure-menu-horizontal">
map
<ul class="pure-menu-list">
<li class="pure-menu-item">About</li>
<li class="pure-menu-item">Contact</li>
</ul>
</div>
<!-- Map -->
<div id="map"></div>
CSS
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
The problem is: the page height ist 100% + the height of the menu. So parts of the map get cut off at the bottom.
I used Firefox' Inspector and changed various CSS settings to no avail. I also tested different browsers to exclude a problem with Firefox. What am I missing? Unfortunately I'm not a CSS guy..
I created a JSFiddle: http://jsfiddle.net/jygzLf3v/13/
The result window is scrollable for the height of the menu but should be "fullscreen" including the menu.
Thanks for some insight.

Sounds like you could use #map {height:calc(100% - $HEIGHT_OF_MENU);} on your map container to size things up properly, and not have any cutoff.Don't forget to add 'px' after your menu height.

You cand simply add overflow: hidden to your body element, in the stylesheet.
http://jsfiddle.net/jygzLf3v/14/

Related

Add scroll only for a tab content but not for a tab label in Clarity Tabs

I have a tab with long content in the project (StackBlitz ref is here).
So the scroll appears.
The corresponding code for it is
<div class="content-container">
<div class="content-area">
<clr-tabs>
<clr-tab>
<button clrTabLink id="tab1-link">Tab1</button>
<clr-tab-content id="tab1-content" *clrIfActive="true">
...
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="tab2-link">Tab2</button>
<clr-tab-content id="tab2-content" *clrIfActive>
Content2
</clr-tab-content>
</clr-tab>
</clr-tabs>
</div>
</div>
The problem is that the scroll covers tab labels and tab content. But I need it to cover only tab content so the tab labels would stay if I scroll down.
I tried to add the following styles to fix it
.content-area {
overflow: hidden !important;
height: 100%;
}
#tab1-content, #tab2-content {
height: 100%;
overflow: auto;
}
But this resulted in scroll disappearing at all. How can I add the scroll only for a tab content?
I'm afraid I couldn't work out enough from your code snippet so looked at the code in Stackblitz. In that, Tab1 and Tab2 are list elements in an unordered list with class nav.
Moving this nav ul out of the content-container div and putting it immediately below the header-2 header element gives you what I think you need, the content-container div fills up the remainder of the main container and scrolls with the Tab list elements remaining fixed above.
This may just be luck - in that all the required flex-related settings are already in place.
I found the following solution.
I need to add to parent component content-area which contains all tabs the overflow property.
.content-area {
overflow: hidden ;
}
It removes the current scrollbar.
After that we can found the height of above elements using Chrome Dev Tools.
Now we should wrap the tab content into another div with some class (e.g. mytab-content).
<clr-tab-content id="tab1-content" *clrIfActive="true">
<div class="mytab-content">
.......
</div>
</clr-tab-content>
And finally we should add the following styles for that class
.mytab-content {
height: calc(100vh - 60px - 36px);
overflow: auto;
}
It will add scroll only for tab content.

How to fit a leaflet map under a bootsrap nav header?

I'm using bootstrap in combination with a leaflet map. Now to give the map full height of the window I used $("#map").height($(window).height()); But I have a nav header at the top of the page. This is the html of the bootstrap nav bar:
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#"><img id="logo" src="images/logo.png"></a>
</nav>
This is my map div:
<div class="col-md-9 col-sm-8 col-xs-8" id="map"></div>
Now when I load the page I get a scrollbar at the side because the map takes the full window height + the height of the nav bar. Is there a way to solve this? Can I add something to the css of the nav bar so the map will be behind it?
UPDATE:
After I implemented you'r suggestion #IvanSanchez, the map got real thin like this:
UPDATE
When I add the css with pixels like this it works and the thin map changes into a 600px height:
#map {
display : table-cell;
height : 800px;
/*height: calc ( 100vh - 5em );*/
}
But I want it to be responsive so I need it in % or like #IvanSanchez suggested it.
Now to give the map full height of the window I used $("#map").height($(window).height());
Don't.
If you want to fit stuff to the viewport size, use the vh, vw, vmin and vmax CSS units.
If you cannot use absolutely positioned block elements to control the size of the map container, then use calc like #map { height: calc ( 100vh - 5em ); }

What's causing the body tag to widen?

I'm using Skeleton CSS Boilerplate
Two different pages of my website, similarly structured, are slightly laterally shifted away from each other. This is causing a jarring effect in the navigation bar when navigating from one page to the other.
Upon investigation, I noticed in the Chrome Dev Tools CSS inspector that the body tag of each page is a different width.
The structure of both pages is the same, shown below. The class .wrap has a max width of 960px, and all the content is contained within .container .wrap.
<body>
<?php
require 'navsub.php';
?>
<div class="container wrap" id="singlepageajax">
</div>
<?php
include 'footer.php';
?>
</body>
So... what could be causing the body tags to be different widths?
Add the following CSS code
html, body {
height: 100%;
overflow: hidden;
}
then add a <div id="container-wrapper"> to wrap up the container
place its CSS like
#container-wrapper {
height: 100%;
overflow-x: auto;
position: absolute;
width: 100%;
}
this will enables the scrolling again
Vertical scroll bar is the cause.
The body element will shrink in horizontal direction to add some free space for the scroll bar, as the browser window has fixed amount of horizontal space.
UPDATE
If you want to prevent this behaviour, you may use:
body{
overflow: hidden;
}
But you may lose the scrolling feature of your browser on the page.

Page transitions keeping a footer and header for variable page content

I am using angular and css for sliding page transitions, and had a nice working version of transitions similar to this plnker. This worked ok but the css was using 'absolute' which took the element in question out of the flow of the page, hiding the rest of it - namely the footer.
The content of what is being transitioned in varies page to page. The footer is hidden because the many parents of the content being displayed have height 0px;
So I removed absolute and now the transitions happen something like this, where the divs are again in the flow of the page, but when transition are floated above and below each other.
I can use transitions to make the new div enter at the same level as the exiting div by changing
.slideRight.ng-leave {
transition-property: all;
transform: translate3d(0,0,0);
}
.slideRight.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(100%,0,0);
}
to
.slideRight.ng-leave {
transition-property: all;
transform: translate3d(0,-100%,0);
}
.slideRight.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(100%,-100%,0);
}
as shown in this plnker. However, the issue is that the div height is still affecting the page, so you can see a vertical scroll bar as the new div enters and the rest of the page is affected.
The divs which enter the page can be different heights, so I don't think simply setting a defined height on a parent div and setting overflow-y: hidden is an option.
Here you go. i edited the first fiddle you posted. Styling is inline because I couldnt be bothered changign the css but you get the drift.
<nav>
<a ng-click="go('/page1', 'slideLeft')">Page 1</a>
<a ng-click="go('/page2', 'slideRight')">Page 2</a>
<a ng-click="go('/page3', 'slideDown')">Page 3</a>
<a ng-click="go('/page4')">Page 4</a> <!-- note: no transition specified -->
</nav>
<!-- App Content Container -->
<div class="page-container">
<div ng-view="" class="page-view" ng-class="pageAnimationClass"></div>
</div>
<footer>
<div style="height: 50px; width:100%; position: fixed; bottom: 0; display: block; background: white; "><br>Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer</div>
</footer>
The example you posted uses a fixed position header with an absolutely positioned full screen content area. The content actually moves right and left underneath the header and the footer i added.
There are other ways to do it but fixed headers and footer generally work well with web apps.
if you wanted a dynamic footer, you would need to restyle your content area. I would center your header and footer items with a margin: 0 auto and make the content full width, with a centered div inside it that is the animated element. It should slide left and right as you intend without breaking your footer.
Keep in mind though that if you transition in items of differing height your footer will jitter as it repositions itself. Maybe consider adding a callback animation on your footer that fades it out and in again whenever the page transition animation plays and stops.

height of 100% not working on side navigation

For the life of me I cannot get my side navigation to expand to the bottom of my page. I've googled this and looked at many other stack overflow questions related to this but nothing is helping.
People have suggested setting a height on the parent div, since height: 100%; doesn't know what the 100% is. But how does the parents height know what 100% is?
I also cannot use any "fixed" or "absolute" positioning because that seems to completely break the responsiveness of Twitter Bootstrap.
Here is my code:
<div id="secondary">
<div class="span10" style="background-color: #860038; min-height: 100%; overflow: hidden;">
<ul class="side-nav">
<?php if (!empty($secondary_menu)): ?>
<?php foreach ($secondary_menu as $key => $menu): ?>
<?php $active = ($this->uri->segment(2,'index') == $key)? 'side-box-active': 'side-box'; ?>
<li class="<?= $active ?>"><?= $menu['label']?></li>
<?php endforeach ?>
<?php endif ?>
</ul>
</div>
</div>
So the above code creates my side navigation dynamically throughout my application. I'm using Twitter Bootstrap and on the div class="span10" I put my background-color for the side nav and min-height: 100%. (Also overflow:hidden).
What this is currently doing is creating my container but it cuts off right when the navigation stops, rather then expanding to the bottom of the page.
As you can see, I setup a parent div with ID="secondary", in case we need it.
Screenshot shows the side navigation. I need the maroon red color to expand to the bottom of my screen. Scratch that it lets you post pictures then explain them and then tells you you can't post pictures :) sorry no image I guess.
Thanks for any help in advance.
In order for 100% height to work, parent elements need 100% height as well, including html and body.
Not sure if you've solved the problem, but if someone doesn't:
When you have a background image or color that you want to repeat all the way down the page, but within that page you have columns of different lengths, the only way to accomplish this is to put the background image or color in the container which will then hold the different lengths of column.
Said columns will expand down according to the amount of content you put within them. The longest div inside the container will make the background image repeat-y (down) or the color.
So your structure would look like this:
<div id="container"> <!--which is the #1 element in your body-->
<div id="leftcolumn"> Your side-nav would go here</div>
<div id="rightcolumn">Your main content which is usually longer
than the menu will go here</div>
</div><!-- end container-->
Obviously in this situation your header and footer div would be placed outside the container div and may need to go within another wrapper div to keep everything centered.
And with, for example, the following CSS, it'll work just fine:
<style>
html,
body {
height:100%;
background-color : #103C52; /* or whatever you like*/
}
#container {
height:100%;
background-color: green; /* or whatever you like*/
}
#leftcolumn {
height:100%;
width: 16.67%; /* or whatever you like*/
background-color: red; /* or whatever you like*/
float: left;
}
#rightcolumn {
height:100%;
width: 80%; /* or whatever you like*/
overflow-x: hidden; /* or whatever you like*/
overflow-y: scroll; /* or whatever you like*/
background-color: blue; /* or whatever you like*/
float: left;
}
</style>
If this is not clear, post what you have so far and I will take a look at it... ;)

Resources