We Keep Coding

Block React Suspense to cover the whole page

I'm trying to use react lazy. I don't want the suspense to cover the page, but when it loads a component it shows the suspense blocked icon on the whole page.
How can I show it just where the component is supposed to be?
The lazy function:
const LandingPage = lazy(() =>
import('./auth/landing/landing').then(({ LandingPage }) => ({ default: LandingPage }))
);
<Suspense fallback={<Loader />}>
<LandingPage />
</Suspense>
The loader component:
import React from 'react';
import classnames from 'classnames';
import styled from 'styled-components';
// eslint-disable-next-line import/no-default-export
export default React.memo(styled(({ className }) => (
<div className={classnames('loader', className)}>
<span className="loader__ball loader__ball--1" />
<span className="loader__ball loader__ball--2" />
<span className="loader__ball loader__ball--3" />
</div>
))`
display: flex;
position: absolute;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
span.loader__ball {
display: inline-block;
margin: auto 0.25rem;
height: 0.75rem;
width: 0.75rem;
border-radius: 0.375rem;
background: #000000;
&.loader__ball--1,
&.loader__ball--2,
&.loader__ball--3 {
animation: bulging 2s infinite ease-in-out;
}
&.loader__ball--1 {
animation-delay: -0.4s;
}
&.loader__ball--2 {
animation-delay: -0.2s;
}
#keyframes bulging {
0%,
80%,
100% {
transform: scale(0);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
}
`);
thanks to anyone who will answer:)

This probably happens because of your CSS.
position: absolute;
width: 100%;
height: 100%;
If you don't have a container (where your Suspense is positioned in) with position: relative you will end up with a ball absolute positioned and stretched over your entire screen.
I put your snippet in a plain HTML/CSS fiddle, so you can see what to do:
https://jsfiddle.net/qLzcuo7h/
As you can see you would expect that your loader is within the both component boxes. But they aren't.
What you need to add is position: relative to the .component to make it work.
In you given code I can't see what element your parent is, since the Suspense is the outer element. I can't see where you will put that element.
The below fiddle is with the relative addition.
https://jsfiddle.net/qLzcuo7h/1/
Hope this will clear things up.

Can I increase the margin-top in css based on how small I make my window?

I want the space between my black div and the navbar to remain the same when I resize the window. I thought of resizing the margin-top as the window gets smaller but I do not know how to get window's current size and use it in css.
Photos:
Full sized window
Minimized window
Question.css
.Question {
background-color: #0B0C10;
margin: 2% 5% 3% 5%;
padding: 4%;
color: #C5C6C7;
}
Question.js
import React from 'react'
import './Question.css'
class Question extends React.Component {
render() {
return (
<div className='Question'>
applications of adaptive testing, starting with Binet in 1905. Adaptive tests are comprised of items
selected from a collection of items, known as an item bank. The items are chosen to match the
estimated ability level (or aptitude level, etc.) of the current test-taker. If the test-taker succeeds on
an item, a slightly more challenging item is presented next, and vice-versa.
</div>
)
}
}
export default Question;
NavBar.css
.NavBar {
background-color: #0B0C10;
position: fixed;
top: 0;
width: 100%;
border-bottom: 2px solid #C5C6C7;
color: #C5C6C7;
}
.Title {
margin-left: 5%;
}
NavBar.js
import React from 'react'
import './NavBar.css'
class NavBar extends React.Component {
render() {
return (
<div className='NavBar'>
<h3 className='Title'>CATlin</h3>
</div>
)
}
}
export default NavBar;
Thank you in advance!

.Question {
background-color: #0B0C10;
margin: 2% 5% 3% 5%;
padding: 4%;
color: #C5C6C7;
}
#media screen and (max-width: 600px) {
.Question {
margin: 4% 5% 3% 5%;
}
}

Yes, you can. "vh" is percentage of your screen height. (Also, vw: percentage of your screen width.) Please, review and run my code and resize your screen height.
.container {
margin-top: 50vh;
height: 100vh;
width: 100vw;
background-color: #ecf0f1;
}
<div class="container"></div>

If you want something more smoothly you must do this without media queries using only vw and vh units.
.foo {
margin-top: 10vw; /* the margin top will be 10% of window width */
}
.bar {
margin-top: 10vh; /* the margin top will be 10% of window height */
}

React/Redux/CSS - Modal placement

i have a Card and a Modal component like so
class Card extends Component {
constructor() {
super();
this.state = { showModal: false }
}
render() {
const { showModal } = this.state;
return (
{/* Some code */}
{showModal && <Modal />}
)
}
}
So, I don't want to render my Modal until it is required. Logic.
The Modal's job, in this context, is to display the full content of the Card component (The Card has a fixed height, so I cannot displaying every bit of information in there).
Now, at a higher level I have the following:
class App extends Component {
/* Some Code */
render() {
return (
<div>
<Content /> {/* Our content */}
<Overlay /> {/* Our all-purpose-overlay (we need it for the Modal) */}
</div>
)
}
}
The problem is that my Card component has the style position: relative and the Modal component has the a z-index and the style position: absolute.
I did some research and I read that nested elements with non-static
position will not work the same way regarding the z-index. The z-index will take effect only within the non-static element.
So I cannot make my Modal appear above the the Overlay component. Furthermore, The Card component has a overflow:hidden property. And so, the Modal gets cropped.
Here is a simple demonstration.
function toggleModal() {
var app = document.getElementById("app");
app.classList.toggle("-modal");
}
:root {
background: #ddd;
}
#app,
#overlay {
height:100vh;
width:100%;
}
#app {
display: flex;
align-items: center;
justify-content: center;
}
/* Overlay */
#overlay {
position: absolute;
top: 0;
left: 0;
z-index: 1;
visibility: hidden;
background: rgba(0,0,0,0.3);
}
.-modal #overlay {
visibility: visible !important;
}
/* Card */
#card {
position: relative;
width: 250px;
padding: 1em;
border-radius: 5px;
background: white;
overflow: hidden; /* Problem */
}
.content {
padding: 4em 0;
text-align: center;
}
.btn {
padding: 1em 2em;
border:none;
color:white;
float: right;
cursor: pointer;
transition: 0.2s ease;
background: #00abff;
}
.btn:hover {
background: #0c9de4;
}
/* Modal */
#modal {
width: 300px;
position: absolute;
top:0;
left: 50px; /* Modal Gets clipped */
visibility: hidden;
background-color:red;
}
.-modal #modal {
visibility: visible;
}
<div id="app">
<div id="card">
<div class="content">content</div>
<button class="btn" onclick="toggleModal()">Display Modal</button>
<div id="modal">
<div class="content">
<div>Modal</div>
<div>With same content</div>
<div>(under the Overlay and also cropped)</div>
</div>
</div>
</div>
<div id="overlay" onclick="toggleModal()"></div>
</div>
Question : How should I organize my components so that I do not get this problem?
I thought of having only one Modal at top level. Then I simply display it. But I need to render the children of the Card into the Modal.
How should I proceed?

Since you are using React, what I would actually recommend is to use a Portal to render your modal. One thing Portals solve in React are precisely this issue. If you are using a more recent version of React (16+) then you already have access to portals.
If you are using an older version of React, that is okay. You can use an implementation like this (react-portal) instead.
Now you will have your components/markup rendered in a totally separate React tree outside of the context of your containing <div> that has position: relative on it and you can absolute or fixed position it wherever you need to.

React whole page scrollbar when component goes offpage

I have an app like this:
as you can see the middle component continues down out of page and that's why I need a scrollbar to scroll down to it. but I can only make it work if I attach it directly on the middle component but I want a regular whole page scrollbar.
here is my app.js
import React, { Component } from 'react';
import OysterView from './components/OysterView.js'
import './uikit/uikit.css';
import './App.css';
import logo from './uikit/assets/images/hrm-white.svg';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<header>
<img src={logo} className="App-logo" alt="HRM"/>
</header>
</div>
<div className="OysterView">
<OysterView />
</div>
</div>
);
}
}
export default App;
I have tried setting it on different places but it does not recognize that the component is out of bounds so cant scroll down the <OysterView /> component is the component that is out of bound so I have tried in CSS
.App {
overflow-y: scroll;
background-color: #fafafa;
position: fixed;
height: 100vh;
width: 100vw;
z-index: -2
}
tried this as well:
html{
height: 100%;
overflow-y: scroll;
margin: 0;
padding: 0;
}
which doesn't add anything at all and that is probably because .App has no height but if I add height the rest of the content gets pushed down so it solves nothing. I have tried adding it to the index.css html as well and that gives me an scrollbar but it cant be scrolled down. so I am al out of ideas here. how should I attack this? z-index on .App?

You do have to scroll the component itself, just make its container full-screen so that the scrollbar will be on the right side of the window.
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba( 0, 0, 0, .5 );
overflow-y: scroll;
}
.modal-content {
background: red;
margin: 20%;
height: 2000px;
}
Page content
<div class="modal-container">
<div class="modal-content">
Modal content
</div>
</div>

React and Flex layout how to use them

I am trying to use React and flexbox.Normally i can use flexbox at react native but icouldnt achive in react.js
this is my Css file
.wrapper, html, body {
height:100%;
margin:0;
position:absolute;
}
.wrapper {
display: flex;
flex-direction: column;
}
.nav {
background-color: red;
flex:1
}
.main {
background-color: blue;
flex:1
}
This is my js file
import React, { Component } from 'react';
import './background.css';
import { Icon } from 'semantic-ui-react'
import Navbar from './navbar'
class Back extends Component {
render() {
return (
<div className="wrapper">
<div className="nav"></div>
<div className="main"></div>
</div>
);
}
}
export default Back;
I got just a white screen what might be a problem ?
Thank you

As the wrapper is positioned absolute, and have no content to grow with, its width collapse to 0.
So simply remove position: absolute from the .wrapper, html, body rule.
If you still want to use position: absolute, you need to also give the wrapper a width.
.wrapper,
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.nav {
background-color: red;
flex: 1
}
.main {
background-color: blue;
flex: 1
}
<div class="wrapper">
<div class="nav"></div>
<div class="main"></div>
</div>

You can also use float:left in the wrapper class.