React and Flex layout how to use them - javascript

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.

Related

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 */
}

Getting frameless React/Electron app title bar to not disappear during scroll

I have a basic app with a text editor and a title bar. I don't want scrollbars to appear on the side unless the text editor goes into overflow. Even then, I don't want the titlebar to disappear during the scroll. Right now, it does.
I think there's some CSS witchcraft I'm missing here, or maybe I've done something wrong.
Using React, JS, and Electron. The text editor is Quill.js if that matters. Used create-react-app.
App.css:
.App {
min-height: 100%;
margin: 0;
background-color: red;
}
.editor {
background-color: rgb(29, 29, 29);
color: rgb(201, 201, 201);
min-width: 100%;
height: 100%;
position: absolute;
margin-top: 30px;
}
.app-bar {
-webkit-app-region: drag;
min-width: 100%;
background-color: green;
position: fixed;
height: 30px;
}
App.js:
import React, { Component } from 'react'
import ReactQuill from 'react-quill';
import './App.css';
import 'react-quill/dist/quill.bubble.css';
export class App extends Component {
constructor() {
super();
}
render() {
return (
<div className="App">
<div className="app-bar">
test
</div>
<div>
<ReactQuill theme="bubble" className="editor" />
</div>
</div>
);
}
}
export default App;
Screenshot of what I mean:
When I scroll down the text stays there, but the colour scrolls:
Try add this,
body{
margin-bottom:30px;
}

responsive layout on React application

the task is to show different components based on the device width;
I've come up with two variants:
write a React Component which will take several components, on each width (sm, md, xl). It'll automatically check the device width and render only one component based on the width. (example)
<DeviceChecker>
<Desktop>
<List/>
</Desktop>
<Mobile>
<Carousel/>
</Mobile>
</DeviceChecker>
What I don't like in this approach is checking the width on window resize event.
Write both components in React but using CSS media queries show or hide each, like this:
<div>
<Carousel className="sm" />
<List className="md" />
</div>
what I don't like in this case is that React will actually render both components but one of them will be simple hidden
I know how to implement both variants, but the question is Which one is correct way to write Responsive Layouts for React Applications?
#media only screen and (min-width: 768px) {
section.dashboard .slick-list .slick-track {
display: flex;
}
section.dashboard .slick-list .slide {
opacity: 1;
}
header .wrapper .article h1 span.arrow {
display:none;
}
header .wrapper .article .description {
max-height: 300px
}
}
#media only screen and (min-width: 1024px) {
.container header .wrapper {
text-align:left;
margin-left:5%;
width:480px;
}
.container header .header-nav-area #nav_container {
display:flex;
}
.container header form {
display:block;
}
.container header .menu-icon {
display:none;
}
header .wrapper .article footer {
display: block;
}
section.dashboard .slick-list .slick-track {
display: flex;
min-width: 309px;
padding: 20px;
}
section.dashboard .slick-list .slick-track[index="2"] {
display: flex;
}
section.dashboard .slick-list .slide {
opacity: 1;
}
}
For more detail visit;
https://itnext.io/3-ways-to-implement-responsive-design-in-your-react-app-bcb6ee7eb424

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>

Categories