React Materialize CSS full-screen height - javascript

I am building a react web application [with Materialize CSS] and I would like to understand some problems with my full-screen component. What I am trying to achieve is pretty simple : I would like the SIDEBAR and CONTENT from the following image to use 100% of the screen height.
/************************** Dashboard.js ************************/
import React from "react";
import "../../style.css";
export default function Dashboard() {
return (
<div className="fullscreen-container">
<div class="row">
{/* SIDEBAR */}
<div className="col s12 m4 l3 sidebar">
<h4>SIDEBAR</h4>
</div>
{/* CONTENT */}
<div className="col s12 m8 l9 content">
<h4>CONTENT</h4>
</div>
</div>
</div>
);
}
/************************** style.css ************************/
.fullscreen-container {
background-color: green;
height: 100vh;
}
.sidebar {
background-color: darkred;
width: 100%;
height: 100%;
}
.content {
background-color: darkslateblue;
width: 100%;
height: 100%;
}
I tried to put the height of .content and .sidebar to 100vh instead but it covers more than my full screen (notice the scrollbar and I have an extra white space at the bottom). I don't understand what is wrong and your help would be appreciated.
when I try with height: 100vh:
EDIT:
The white space at the bottom seems to be the same height as the space between my text and top of the screen, is it because of some sort of padding? Is it materialize css grid? How could I fix that?

Your 2 divs occupy 100% height of their parent - The parent of your 2 divs is <div class='row'..> and it is not 100% of the view height; So just make it 100% of its parent, the div with fullscreen-container class;
add this to your CSS:
.row { height:100%; margin-bottom:0!important;}
EDIT: there was extra whitespace at the bottom due to row class having margin-bottom:20px which we had to override
complete working stackblitz here

Related

Include my Javascript animation on all the html body so it stays while scrolling the page

Hi i'm learning html/css and javascript and I think I'm having an issue with my html structure. Basically what I want to do is that my particles animation stays on the website while scrolling the page. I have a Javascript file that does a getElementById('particles') to run the canvas on a div but it only stays on the first page.
I tried to move the "particles" div as a main div that will contain all the sections but it didn't work.
Here's the repository of the files if anyone is interested: https://github.com/DanielVillacis/DanielVillacis.github.io
Here's my html structure :
document.addEventListener('DOMContentLoaded', function() {
particleground(document.getElementById('particles'), {
dotColor: '#FFFFFF',
lineColor: '#FFFFFF'
});
var intro = document.getElementById('intro');
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
}, false);
html,
body {
width: 100%;
height: 100vh;
}
canvas {
display: inline-block;
vertical-align: baseline;
}
header,
section {
display: block;
}
#particles {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
section {
height: 100vh;
width: 100%;
display: inline-block;
scroll-snap-align: start;
}
<body>
<div class="container">
<main role="main">
<section class="intro">
<div id="particles">
<header class="splash" id="splash" role="banner">
<div id="intro">
</div>
</header>
</div>
</section>
<section class="AboutMe">
<div class="introduction">
</div>
</section>
<section class="box">
<div class="projectContainer">
</div>
</section>
<section class="Contact">
<h2 class="ContactTitle">Contact</h2>
<div class="contactLinks">
</div>
</section>
</main>
</div>
</body>
Use the CSS position: fixed; property.
With position set to fixed, your canvas is positioned relative to the viewport and hence would remain even while scrolling.
.pg-canvas {
display: block;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
width: 100%;
height: 100vh;
}
You have put the particles (which are shown on a canvas) into a section which will scroll out of view.
The particles library you are using places this canvas just before the element you have given it, which has id particles.
You can fix just the canvas by adding position: fixed to the canvas selector in your style sheet (watch out if you have other canvases to give a more definite selector).
This will work in many cases to fix the canvas with the particles to the viewport. But note this description from MDN
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to the initial containing block established by the viewport, except
when one of its ancestors has a transform, perspective, or filter
property set to something other than none (see the CSS Transforms
Spec), in which case that ancestor behaves as the containing block.
(Note that there are browser inconsistencies with perspective and
filter contributing to containing block formation.) Its final position
is determined by the values of top, right, bottom, and left.
You are OK at the moment because you move intro with top but if that were a translate you’d have to put the canvas out of intro.

Using Text With The Trianglify Javascript Library

So I've been using the Trianglify library and I've been loving it. My only problem is the way it handles text: it pushes it all to the top, whereas I want the randomly generated background to act as the background, with the text on it. Here's my code so far:
<script>
var pattern = Trianglify({
height: window.innerHeight,
width: window.innerWidth,
cell_size: 40});
document.body.appendChild(pattern.canvas())
</script>
and
<div class="container-fluid" id="welcome">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1> Welcome to the website </h1>
</div>
</div>
</div>
Please help! Thanks so much for your time.
I just came across this question because I have the same issue. Here's what I did.
HTML
<canvas id="container1"></canvas>
<script>
var pattern = Trianglify({cell_size: 25, x_colors: 'Blues'});
pattern.canvas(document.getElementById('container1'));
</script>
<div class="screen-container trianglify-container">
<div class="container">
<div class="row">
<h3>This is where my text goes</h3>
</div>
</div>
</div>
CSS
.trianglify-container {
background-color: transparent;
color:#fff;
text-align: center;
padding-top: 20vh;
}
canvas#container1 {
position: absolute;
width: 100vw;
height: 100vh;
}
Explanation
I am using Bootstrap, hence the container and row divs in the HTML.
Setting the canvas#container1 to an absolute position fixes it and everything that follows in the HTML should come over it. Setting width to 100vw and height to 100vh ensures it takes up the whole screen.
Setting the trianglify-container position to relative ensures it shows up relative to any fixed or absolute objects above it, in this case the canvas. Using padding let's you move where you want the text.
If I wanted everything else on the page always to have the same trianglify background, I could do:
canvas#container1 {
position: absolute;
width: 100vw;
height: 100vh;
}

Disable CSS transformation-based centering with Jquery depending on content height

For a website I'm designing directly with CSS and Foundation 5, I am centering all content vertically in the middle of the viewport when the content area is taller than the browser window.
I found an excellent pure CSS solution that works perfectly. I'm very happy with the current behavior when the content area is small enough to fit entirely within the viewport without a scroll fold. I fairly sure that I don't need or want any kind of vertical centering when the content is long enough for scrolling.
The problem is that when there is too much content to fit on the screen, the CSS crops off the header and makes it impossible to scroll up to see the top of the content.
The CSS I adapted from davidwalsh.name uses a transformation to raise the container by half its height after its top was placed 50% down from the top.
#non-framework-container {
height: 100%;
width: 100%;
}
#non-framework-wrapper {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
This is applied to these two nested containers around the Foundation classes.
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
[...]
</header>
[...]
</div>
</div>
I want to disable the CSS when the content (specifically #non-framework-container) is taller than the viewport. I was hoping it would be as simple as this bit of JQuery:
$(document).ready(function) {
if ( $("#non-framework-container").height() > $(window).height() ) {
$("#non-framework-wrapper").css("position":"static", "top":"0", "transform":"none");
}
});
Unfortunately, my script doesn't do anything, no matter the amount of content or the browser size (and regardless of whether I load it in the head tag or at the bottom of the body tag).
I love how the CSS transformation method works, so I'm reluctant to try a pure JavaScript solution.
Try this (not tested, cannot currently test where I am):
HTML:
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
<h1>Your mom makes the best pizza</h1>
</header>
</div>
</div>
CSS:
#non-framework-container {
height: 100%;
width: 100%;
}
.transform {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
JAVASCRIPT:
var div = $("#non-framework-wrapper").height();
var winSize = $(window).height();
$(document).ready(function() {
if (div < winSize) {
$("#non-framework-wrapper").addClass('transform');
} else {
$("#non-framework-wrapper").removeClass('transform');
}
});

Make Div fixed bottom & scrollable

I want to have a long page, with a fixed top 100px div, and a fixed 50px bottom div. However, I want the bottom div to scroll as you scroll down the page.
Its hard to explain, but the best example of this is on the front page of PayPal.com
On the first page load, the bottom div looks like it is fixed, and as you adjust the height of the browser window, that div stays at the bottom. Yet as you scroll down the page it is not fixed.
Can anyone explain how they have done this? I am trying to re-create something similar, but cant see how they have managed it.
As far as I can see they have this html...
<div id="fixed-top">
<header class="table-row">
// header content
</header>
<div class="table-row table-row-two">
// Video content
</div>
<div class="table-row">
//bottom content
</div>
</div>
And this CSS...
#fixed-top {
height: 100%;
width: 100%;
display: table;
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.table-row {
display: table-row;
}
But that alone doesn't do it. I also can't see any js thats getting window height and applying it to the main fixed div.
Help! :)
EDIT:
Have just found a way to do it with javascript, controlling the height of the middle row using the window height, minus the 150px for the header and third row.
jQuery(document).ready(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
$(window).resize(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
});
});
But saying that, Zwords CSS only method seems like a winner.
From what I understand, you are looking for something like a sticky footer. So basically if the content is not enough, the footer should go sit at the bottom like its fixed, but if content comes in, it should scroll down like other content.
Try this - http://css-tricks.com/snippets/css/sticky-footer/
First off, you'll need to set the height of the body and html tag, otherwise the table won't take the full screen. Then I altered your code, made it a bit easier.
HTML:
<div id="fixed-top">
<header>
// header content
</header>
<div>
// Video content
</div>
<div>
//bottom content
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
#fixed-top {
display: table;
width: 100%;
height: 100%;
}
#fixed-top > * { /* makes all the direct children of #fixed-top a table row*/
display: table-row;
background: lightblue;
}
#fixed-top > *:nth-child(1) {
background: lightgreen;
height: 40px;
}
#fixed-top > *:nth-child(3) {
background: lightgreen;
height: 25%;
}
You can either set the height to a fix height (in px) or percentages. If you only give two of the three rows a height, the third one will automaticly fill up the rest space.
Also, check this demo.
Check this fiddle / Fullscreen
Using display:table;,display:table-row;,min-height to adjust to screen
HTML
<div class="wrapper">
<div class="row">menu</div>
<div class="row">content</div>
<div class="row">footer</div>
</div>
<div class="wrapper">
<div class="row">content1</div>
<div class="row">content2</div>
<div class="row">content3</div>
</div>
CSS
html,body,.wrapper{
width:100%;
height:100%;
margin:0px auto;
padding:0px;
}
.wrapper{
display:table;
border:1px solid black;
}
.wrapper .row{
display:table-row;
background-color:rgb(220,220,220);
}
.wrapper .row:nth-of-type(1){
min-height:15px;
}
.wrapper .row:nth-of-type(2){
height:100%;
background-color:white;
}
.wrapper .row:nth-of-type(3){
min-height:15px
}
You can do this easily with jQuery using $(window).height() and subtracting your footer/header's heights. See Fiddle for an example.

Content fitting and re-sizing to a div container

I am trying to make a page that is setup like the image.
A & B are dynamic heights, their widths are static. C is a static size height 500px and width 500px.
How do i make it so that the content height in each A & B resize each other without going over the height of say 500px
http://i47.tinypic.com/zvyd7d.png
Add this to the CSS of a and b.
max-height:500px;.
As long as you are escaping your floats (if any) correctly, it will cut it off there.
You may need to add
overflow:hidden;
if your content in a or b extends 500px, this will cut it from being seen in the page.
The completed code as I understand the question is
The CSS
#wrap { width: 700px; height:500px; } /* this combines both static widths and height stays dynamic */
.a, .b { float:left; background-color:#F03; width: 200px; height:50%; min-height:100px; max-height: 500px; }
.c { background-color:#990; width: 500px; height: 500px; float: right; }
HTML
<div id="wrap">
<div class="c">C</div>
<div class="a">A</div>
<div class="b">B</div>
<div style="clear:both;">
</div>
Notice the C is on top. That's because it floats to the right side of the container and the rest tries to find room that C isn't filling. Background colors just for visual aid.
http://jsfiddle.net/QW5MQ/ <-- These are your friend.

Categories