I have a div that is 100vw of width and is scrollable with dynamic elements. However, once you add more items, the first will suddenly disappearing once is not visible even if you try to scroll out.
This is more testable on mobile phones, once the view width is smaller.
My question is: How I can achieve a natural scroll with all items being visible with a view width of 100vw?
html, body {
height: 100vh;
width: 100vw;
}
#images {
overflow-x: scroll;
display: flex;
align-items: center;
justify-content: center;
height: 35vh;
width: 100vw;
img {
height: 20vh;
width: 20vh;
margin-right: 1.5rem;
cursor: pointer;
}
}
const App: React.FC = () => {
const [photos, setPhotos] = React.useState<string[]>([])
React.useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/photos')
.then(res => res.json())
.then(data => data && setPhotos(data.filter(p => p.id < 11).map(p => p.url)))
}, [])
return (
<div id='images'>
{photos.length && photos.map((p, i) => (
<img key={`${i}${p}`} src={p} alt='mock'/>
))}
</div>
)
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.querySelector('#root')
);
Code pen: https://codepen.io/mdsp9070/full/bGeGXyg
This what you mean? Flex wrap or grid will give you this effect.
html, body {
height: 100vh;
width: 100vw;
}
#images {
overflow-x: scroll;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100vw;
img {
height: 20vh;
width: 20vh;
margin-right: 1.5rem;
cursor: pointer;
margin-bottom: 12px;
}
}
EDIT*
html, body {
height: 100vh;
width: 100%;
box-sizing: border-box;
}
#images {
margin: 0 auto;
padding: 0 5px;
box-sizing: border-box;
overflow-x: scroll;
display: flex;
align-items: center;
height: 35vh;
width: 100%;
img {
box-sizing: border-box;
height: 20vh;
width: 20vh;
margin-right: 1.5rem;
cursor: pointer;
}
}
Related
I want to create a dynamic tile(div) based on number of users are available.
Like it is happen in microsoft team meetings.
Example -
when there is only user then div occupy full screen.
When there are two users then both the divs should get 50% width like
When there are 3 users then divs should occupy 25%,25% and 50% area of screen. Like
When there ate four, five and six user then it will occupy space as -
And so on. So the dynamic tile (div) can adjust the UI automatically atleast upto 12-16 tiles.
This also needs to be responsive.
Any help is really appreciated.
I made one to three users.
This is an example. using the current logic, you can do the rest yourself.
good luck.
var numUsers = $('#xusersx .user').length;
$('#xusersx').addClass('nowusers-' + numUsers);
body {
margin: 20px;
}
#xusersx {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
}
#xusersx>.user {
border: solid 4px black;
box-sizing: border-box;
}
#xusersx.nowusers-1>.user {
width: 100%;
height: 200px;
}
#xusersx.nowusers-2>.user, #xusersx.nowusers-3>.user {
width: calc(50% - 10px);
height: 200px;
}
#xusersx.nowusers-3 {
width: 50%;
}
#xusersx.nowusers-3>.user:last-child {
width: 100%;
height: 160px;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div id="xusersx">
<div class="user"></div>
</div>
var numUsers = $('#xusersx .user').length;
$('#xusersx').addClass('nowusers-' + numUsers);
body {
margin: 20px;
}
#xusersx {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
}
#xusersx>.user {
border: solid 4px black;
box-sizing: border-box;
}
#xusersx.nowusers-1>.user {
width: 100%;
height: 200px;
}
#xusersx.nowusers-2>.user, #xusersx.nowusers-3>.user {
width: calc(50% - 10px);
height: 200px;
}
#xusersx.nowusers-3 {
width: 50%;
}
#xusersx.nowusers-3>.user:last-child {
width: 100%;
height: 160px;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div id="xusersx">
<div class="user"></div>
<div class="user"></div>
</div>
var numUsers = $('#xusersx .user').length;
$('#xusersx').addClass('nowusers-' + numUsers);
body {
margin: 20px;
}
#xusersx {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
}
#xusersx>.user {
border: solid 4px black;
box-sizing: border-box;
}
#xusersx.nowusers-1>.user {
width: 100%;
height: 200px;
}
#xusersx.nowusers-2>.user, #xusersx.nowusers-3>.user {
width: calc(50% - 10px);
height: 200px;
}
#xusersx.nowusers-3 {
width: 50%;
}
#xusersx.nowusers-3>.user:last-child {
width: 100%;
height: 160px;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div id="xusersx">
<div class="user"></div>
<div class="user"></div>
<div class="user"></div>
</div>
I am trying to create a layout which allows you to resize the sidebar by dragging one edge of it. This behavior can be seen in CodePen/CodeSandbox, etc.. - you can drag each 'code window' to resize it. I am looking for this same behavior but with the page layout.
What I have come up with allows me to drag to resize, but if there is a lot of content within the 'main' area (area that is not the sidebar) it throws off the drag.
I want to be able to drag all the way to the edge of the screen, regardless of the content within.
I think the best way to show this issue is by a demo:
Original Demo:
const resizer = document.querySelector("#resizer");
const sidebar = document.querySelector("#sidebar");
resizer.addEventListener("mousedown", (event) => {
document.addEventListener("mousemove", resize, false);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", resize, false);
}, false);
});
function resize(e) {
const size = `${e.x}px`;
sidebar.style.width = size;
}
/**
* Helpers
*/
sidebar.style.width = '325px';
const mainContent = document.querySelector("#main-content");
function addContent() {
const mainContentStr = [...Array(10).keys()].map(i => "Main Content");
mainContent.innerHTML += mainContentStr.join(' ') + '<br /><br /><h1>Now drag to see how difficult it is, remove content to see how easy it is</h1>';
}
function removeContent() {
mainContent.innerHTML = '';
}
document.querySelector("#add-content")
.addEventListener('click', () => addContent())
document.querySelector("#remove-content")
.addEventListener('click', () => removeContent())
body {
position: relative;
height: auto;
min-height: 100vh;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
overflow: hidden;
margin: 0;
}
#wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
display: flex;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
flex-shrink: 0;
position: relative;
display: flex;
overflow: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#sidebar {
height: 100%;
position: relative;
margin 0;
padding: 0;
box-sizing: border-box;
background: lightgray;
border: 2px solid darkgray;
}
#resizer {
position: relative;
z-index: 2;
width: 18px;
cursor: col-resize;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0, 0, 0, 0.4);
background: #333642;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main {
background: lightblue;
height: 100%;
flex-grow: 1;
flex-direction: row;
position: relative;
display: flex;
margin: 0;
padding: 0;
}
#add-content {
width: 80px;
float: right;
background-color: forestgreen;
}
#remove-content {
width: 80px;
float: right;
background-color: salmon;
}
<div id="wrapper">
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
<button id="add-content">Add Content</button>
<button id="remove-content">Remove Content</button>
</div>
<div id="resizer"></div>
<div id="main">
<p id="main-content"></p>
</div>
</div>
</div>
Updated Demo:
After adding buttons, they appear stretched vertically 100%
const resizer = document.querySelector("#resizer");
const sidebar = document.querySelector("#sidebar");
resizer.addEventListener("mousedown", (event) => {
document.addEventListener("mousemove", resize, false);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", resize, false);
}, false);
});
function resize(e) {
const size = `${e.x}px`;
sidebar.style.flexBasis = size;
}
/**
* Helpers
*/
sidebar.style.flexBasis = '325px';
const mainContent = document.querySelector("#main-content");
function addContent() {
const mainContentStr = [...Array(10).keys()].map(i => "Main Content");
mainContent.innerHTML += mainContentStr.join(' ') + '<br /><br /><h1>Now drag to see how difficult it is, remove content to see how easy it is</h1>';
}
function removeContent() {
mainContent.innerHTML = '';
}
document.querySelector("#add-content")
.addEventListener('click', () => addContent())
document.querySelector("#remove-content")
.addEventListener('click', () => removeContent())
body {
position: relative;
height: auto;
min-height: 100vh;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
overflow: hidden;
margin: 0;
}
#wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
display: flex;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
flex-shrink: 0;
position: relative;
display: flex;
overflow: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#sidebar {
height: 100%;
position: relative;
margin 0;
padding: 0;
box-sizing: border-box;
background: lightgray;
border: 2px solid darkgray;
min-width: 0;
}
#resizer {
flex-basis: 18px;
position: relative;
z-index: 2;
cursor: col-resize;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0, 0, 0, 0.4);
background: #333642;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main {
flex-basis: 0;
flex-grow: 1;
min-width: 0;
background: lightblue;
height: 100%;
flex-direction: row;
position: relative;
display: flex;
margin: 0;
padding: 0;
}
#add-content {
width: 80px;
float: right;
background-color: forestgreen;
}
#remove-content {
width: 80px;
float: right;
background-color: salmon;
}
<div id="wrapper">
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
</div>
<div id="resizer"></div>
<div id="main">
<button id="add-content">Add Content</button>
<button id="remove-content">Remove Content</button>
<p id="main-content"></p>
</div>
</div>
</div>
To set a fixed invariable width in Flexbox, use flex-basis instead of width. From that fixed size, a flex item can then shrink or grow depending on the available space and the properties of flex-grow and flex-shrink.
Furthermore, the default min-width value of a flex item is auto. This means that the item cannot have a width smaller than its content size, even when you set its flex-basis to 0px. This means that we have to override the default min-width value to 0px so that upon dragging the #resizer element, it can shrink itself completely.
Here's a working example. I merely tweaked your width property to flex-basis in both JS and CSS. And then, I also added a min-width property of 0px to both #main and #sidebar.
const resizer = document.querySelector("#resizer");
const sidebar = document.querySelector("#sidebar");
resizer.addEventListener("mousedown", (event) => {
document.addEventListener("mousemove", resize, false);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", resize, false);
}, false);
});
function resize(e) {
const size = `${e.x}px`;
sidebar.style.flexBasis = size;
}
/**
* Helpers
*/
sidebar.style.flexBasis = '325px';
const mainContent = document.querySelector("#main-content");
function addContent() {
const mainContentStr = [...Array(10).keys()].map(i => "Main Content");
mainContent.innerHTML += mainContentStr.join(' ') + '<br /><br /><h1>Now drag to see how difficult it is, remove content to see how easy it is</h1>';
}
function removeContent() {
mainContent.innerHTML = '';
}
document.querySelector("#add-content")
.addEventListener('click', () => addContent())
document.querySelector("#remove-content")
.addEventListener('click', () => removeContent())
body {
position: relative;
height: auto;
min-height: 100vh;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
overflow: hidden;
margin: 0;
}
#wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
display: flex;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
flex-shrink: 0;
position: relative;
display: flex;
overflow: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#sidebar {
height: 100%;
position: relative;
margin 0;
padding: 0;
box-sizing: border-box;
background: lightgray;
border: 2px solid darkgray;
min-width: 0;
}
#resizer {
flex-basis: 18px;
position: relative;
z-index: 2;
cursor: col-resize;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0, 0, 0, 0.4);
background: #333642;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main {
flex-basis: 0;
flex-grow: 1;
min-width: 0;
background: lightblue;
height: 100%;
flex-direction: row;
position: relative;
display: flex;
margin: 0;
padding: 0;
}
#add-content {
width: 80px;
float: right;
background-color: forestgreen;
}
#remove-content {
width: 80px;
float: right;
background-color: salmon;
}
<div id="wrapper">
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
<button id="add-content">Add Content</button>
<button id="remove-content">Remove Content</button>
</div>
<div id="resizer"></div>
<div id="main">
<p id="main-content"></p>
</div>
</div>
</div>
I am building a mobile application which will have a scrollable element in the middle of the screen. Currently when I try and scroll the entire app moves. I would like the all other elements to remain fixed while my element scrolls.
Here is my main React App:
class MobileServices extends Component {
render() {
return (
<div className={style.app}>
<div className={style.mobileHeader}>
<div className={style.logoBox}>
Logo Here
</div>
<div className={style.contactBox}>
</div>
</div>
<div className={style.mainContent}>
<div className={style.contentOne}></div>
<div className={style.contentTwo}></div>
<div className={style.contentThree}></div>
</div>
</div>
);
}
}
Here is the CSS:
html, body {
margin: 0;
/* height: 100% */
}
.app {
background-color: green;
background-size : cover;
background-attachment: fixed;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.contactBox {
margin: 1rem;
padding: 1rem;
}
.contentOne {
background-color: blue;
display: flex;
height: 10rem;
width: 100vw
}
.contentTwo {
background-color: red;
display: flex;
height: 10rem;
width: 100vw
}
.logoBox {
border: 2px solid white;
margin: 1rem;
padding: 2rem;
}
.mainContent {
flex: 1;
display: flex;
overflow: scroll;
margin-top: 4rem;
height: 10rem;
width: 300vw;
overflow-x: auto;
}
.mobileHeader {
display: flex;
justify-content: space-between;
width: 100%;
}
I have tried making the app class fixed, but that only prevented me from being able to scroll at all.
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
.app {
// your css and
display: flex;
flex-direction: column;
}
.mainContent {
flex-grow: 1;
overflow: auto;
// rest of your css
}
Optional, you can set your mobielHeader to have position: sticky
I have no idea why, but the function thumbsScroll only runs the first alert, and then stops. It doesn't even show the 2nd alert.
The function is supposed to hide the 'scroll' divs when the number of thumbs is less than 5.
Probably a very simple problem, but actually can't find a solution to this, and have spent a lot of time trying to find out. Is there something I'm not getting here?
var mainImg = document.getElementById("main-image");
function thumb1() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/394545.jpg')";
}
function thumb2() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/572806.jpg')";
}
function thumb3() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/486757.jpg')";
}
function thumb4() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/612357.jpg')";
}
function thumb5() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/612358.jpg')";
}
function thumb6() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/661833.jpg')";
}
function thumbsScroll() {
alert('test - function runs');
var thumbs = document.getElementByClassName('image-thumb');
var desktopThumbsScroll = document.getElementById('scroll-desktop');
var mobileThumbsScroll = document.getElementById('scroll-mobile');
alert('test alert 2 - doesnt work');
if (thumbs.length < 5) {
desktopThumbsScroll.style.display = 'none';
mobileThumbsScroll.style.display = 'none';
alert('if true')
} else {alert('if false')}
}
thumbsScroll();
/* rollovers */
#main-image {
background-image: url('https://cml.sad.ukrd.com/image/661835.jpg');
}
#thumb1 { background-image: url('https://cml.sad.ukrd.com/image/394545.jpg') }
#thumb2 { background-image: url('https://cml.sad.ukrd.com/image/572806.jpg') }
#thumb3 { background-image: url('https://cml.sad.ukrd.com/image/486757.jpg') }
#thumb4 { background-image: url('https://cml.sad.ukrd.com/image/612357.jpg') }
#thumb5 { background-image: url('https://cml.sad.ukrd.com/image/612358.jpg') }
#thumb6 { background-image: url('https://cml.sad.ukrd.com/image/661833.jpg') }
/* rollovers */
* {
margin: 0;
padding: 0;
font-family: arial;
line-height: 1.5em;
box-sizing: border-box;
}
#images-and-hook-container {
width: 100%;
height: auto;
float: left;
background: cyan;
display: flex; /* allows hook container to be full height */
}
#hook-container {
background: blue;
float: left;
width: 40%;
height: auto;
padding: 3% 0 0 3%;
}
#images-wrap {
width: 60%;
height: auto;
float: left;
position: relative;
}
#scroll-desktop {
position: absolute;
bottom: -6%;
right: 5%;
font-size: 0.5em;
text-transform: uppercase;
opacity: 0.5;
}
#scroll-desktop > span { font-size: 1.5em }
#scroll-mobile { display: none }
#main-image {
width: 79%;
float: left;
background-size: cover !important;
background-position: center center !important;
height: auto;
padding-bottom: 53.666%;
}
#image-thumbs {
width: 19%;
height: auto;
float: left;
margin-left: 2%;
overflow-y: auto !important;
overflow-x: hidden;
position: absolute;
right: 0;
height: 100%;
}
.image-thumb {
margin-bottom: 6%;
background-position: center center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;
}
.image-thumb:last-of-type { margin-bottom: 0 }
#media (max-width: 768px) {
body { background: red }
#images-and-hook-container {
flex-direction: column;
}
#images-wrap {
position: static;
width: 100%;
}
#scroll-desktop { display: none }
#scroll-mobile {
display: block;
background: yellow;
width: 100%;
text-align: center;
text-transform: uppercase;
font-size: 0.5em;
opacity: 0.5;
}
#scroll-mobile > span { font-size: 1.5em }
#hook-container {
width: 100%;
padding: 3% 0;
}
#main-image {
width: 100%;
padding-bottom: 66.666%;
margin-bottom: 1%;
}
#image-thumbs {
width: 100%;
margin-left: 0;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden !important;
}
.image-thumb {
float: left;
margin-bottom: 6px;
width: 24.333%;
padding-bottom: 16.666%;
flex: 0 0 24.333%;
margin-left: 1%;
}
.image-thumb:first-of-type { margin-left: 0 }
#aspect-ratio-wrap {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
}
}
#media (max-width: 400px) {
#scroll-mobile { font-size: 0.25em }
#scroll-mobile > span { font-size: 1em }
}
#media (min-width: 1000px) {
#scroll-desktop {
bottom: -5%;
right: 6%;
}
}
<div id='images-and-hook-container'>
<div id="images-wrap">
<div id="main-image"></div>
<div id='aspect-ratio-wrap'>
<div id="image-thumbs">
<div class="image-thumb" id="thumb1" onmouseover="thumb1()"></div>
<div class="image-thumb" id="thumb2" onmouseover="thumb2()"></div>
<div class="image-thumb" id="thumb3" onmouseover="thumb3()"></div>
<div class="image-thumb" id="thumb4" onmouseover="thumb4()"></div>
<div class="image-thumb" id="thumb5" onmouseover="thumb5()"></div>
<div class="image-thumb" id="thumb6" onmouseover="thumb6()"></div>
</div>
</div>
<div id='scroll-desktop'>Scroll <span>↓</span></div>
</div>
<div id='scroll-mobile'>Scroll <span>→</span></div>
<div id='hook-container'>
hook container
</div>
</div>
You should definitely keep your eye on the JavaScript console. This is the first place to look when something doesn't work. The console will try to give you hints about the errors in your code.
Memorize the shortcut, the console in chrome on windows: ctrl-shift-j.
When running your provided script the console will tell you that it didn't understand getElementByClassName:
You mis-typed
getElementByClassName
it should be
getElementsByClassName
There is no a function like getElementByClassName. You can use document.getElementsByClassName('image-thumb') to achieve your goal.
The difficult issue is that I need this CSS rule: html {height: 100%} in order to make my first page work. See prototype.
This allows the login div to be centered based on the height of the window.
However, the second page now is stuck at this height and does not expand as I populate the content using ajax. Either click on the star in this link or see below.
You can see where the dotted line stops is the original rendering of the window at 100%.
If I remove the height of 100% it will expand but then the SignOn page is broken as it has no height.
Note: React is controlling the changing from page to the other using a simple conditional in the JSX based on the application state.
Should I alter the CSS height for HTML based on application state or is there a better way to do this?
A better question, might be, that after the content in the div changes, shouldn't the div expand to reflect this?
Relevant CSS
html{
width: 100%;
height: 100%;
}
body{
background-image: url('_images/bg_paper.jpg');
height: 100%;
width: 100%;
}
#app{
width: 100%;
height: 100%;
}
#contents{
width: 100%;
height: 100%;
}
#top-1{
position: fixed;
width: 100%;
height: 40px;
background: rgba(255, 255, 255, 0.8);
border-top: 3px solid #000000;
border-bottom: 1px solid #bbbbbb;
z-index: 1000;
}
#top-2{
position: relative;
width: 90%;
height: 100%;
margin: 0 auto;
border-left: 1px dotted #888888;
border-right: 1px dotted #888888;
}
#container-1{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
top: 44px;
}
#container-2{
position: relative;
width: 90%;
height: 100%;
margin: 0 auto;
border-left: 1px dotted #888888;
border-right: 1px dotted #888888;
}
.body{
display: none;
position: relative;
width: 100%;
height: 100%;
}
I think using flex is much easier to deal with this kind of situations.
You can set your main container as flex and play with the justify and align properties to center the elements.
The problem here is that you got a fixed positioned element as a toolbar that goes out of flow, so we will set margin-top to the next element respectively to the fixed element's height.
another issue is that you want to center the login component when its parent isn't at the same height as the view port, this can be handled with a min-height:100vh to the main container.
Here is a very basic demonstration of the above:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
login: true,
items: [
'item 1',
'item 2',
'item 3',
'item 4',
]
};
}
addITem = e => {
const { items } = this.state;
const nextItem = `item ${items.length + 2}`;
this.setState({ items: [...items, nextItem] });
}
loginView = e => {
this.setState({ login: true });
}
login = e => {
this.setState({ login: false });
}
render() {
const { items, login } = this.state;
return (
<div className="container">
<div className="toolbar">
<div className="title">This is a fixed toolbar, click to add items</div>
<button className="btn" onClick={this.addITem}>+</button>
<button className="btn" onClick={this.loginView}>Login</button>
</div>
{login ?
<div className="login-wrapper">
<div className="login">
<label>Login</label>
<input placeHolder="user name" />
<input type="password" placeHolder="password" />
<button className="btn" onClick={this.login}>Go</button>
</div>
</div>
:
<div className="items">
{items.map(item => <div className="item">{item}</div>)}
</div>
}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
.container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
.toolbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
padding: 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background-color: #333;
color: #fff;
}
.title {
padding: 10px;
}
.btn {
padding: 5px;
width: 100px;
margin: 0 15px;
}
.items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 65px;
align-content: baseline;
}
.item {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 250px;
box-shadow: 0 0 3px 1px #333;
margin: 5px;
padding: 5px;
}
.login-wrapper{
display: inline-block;
margin: auto;
}
.login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>