i have a React code that is doing simple form:
return (
<form onSubmit={handleSubmit} className="login-form">
<label>
Username:
<input
type="text"
value={username}
onChange={(event) => setUsername(event.target.value)}
className="input"
/>
</label>
<br />
<label>
Password:
<input
type="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
className="input"
/>
</label>
<br />
<button type="submit" className="button">Login</button>
</form>
The fact is when i'm styling this code i get the witdh button is greater than inputs but i don't understand what i'm doing bad, because its giving 100% width in both elements.
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #f1f1f1;
}
.login-form {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
padding: 20px;
flex-direction: column;
background-color: white;
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
}
.label {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.input {
padding: 10px;
font-size: 18px;
border: 1px solid #ddd;
display: block;
margin-bottom: 10px;
width: 100%;
}
.button {
padding: 10px 20px;
font-size: 18px;
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
width: 100%;
}
So, what i'm doing wrong? I thought the button width 100% would have been adapt to class form
Example:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #f1f1f1;
display: flex;
justify-content: center;
}
.login-form {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
padding: 20px;
flex-direction: column;
background-color: white;
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
width: min-content;
}
.label {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.input {
padding: 10px;
font-size: 18px;
border: 1px solid #ddd;
display: block;
margin-bottom: 10px;
}
.button {
padding: 10px 20px;
font-size: 18px;
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
width: 100%;
}
<form onSubmit={handleSubmit} class="login-form">
<label>Username:
<input type="text"
class="input"/>
</label>
<br />
<label>Password:
<input type="password"
class="input"/>
</label>
<br />
<button type="submit" class="button">Login</button>
</form>
I want to move the "Not got account" submit button to below the form but not sure what I am doing wrong
I think it is the CSS for .box but not sure how to edit it so it moves the button below and I tried using div tags to move it and they did not work.
Is there a bit of code in my CSS that is keeping it in the centre
I would like to keep it in the same style
Any help would be greatly appreiated
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
This is because the 2nd form uses the same class box which centers the element with the first one.
.box {
...
top: 50%; <--- this is the problem
left: 50%;
...
}
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box2 {
padding: 0px;
top: 90%;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box box2" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
Just don't position your boxes absolute. Makes it quite difficult to get the positioning right.
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
margin: 0 auto;
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
Not sure if this is what you are looking for, but position absolute in your form is not the best use in this case. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Anyway, I made some adjustments in your code: I added a div container for the whole page and made some changes in your css as well. You can check it out in the demo below.
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
text-align: center;
font-weight: 100;
width: 100vw;
height: 100vh;
}
.main-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
margin-top: 10%;
width: 400px;
padding: 40px;
/* position: absolute; */
/* top: 50%;
left: 50%; */
/* transform: translate(-50%, -50%); */
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email" />
<input type="password" name="u_pass" placeholder="Password" />
<input type="submit" name="u_btn" value="Login" />
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?" />
</form>
</div>
</div>
</body>
</html>
I just want with flexbox if possible when I am on a big screen 10 Buttons on a row.
When I am on a middle screen 5 Buttons on first row and 5 on second row.
When I am on a little screen 2 Buttons per rows.
and when i am on a very little screen 1 Buttons per rows.
So I just want a multiple of 10 because I have 10 buttons but I don't want something like 8 Buttons first row and 2 Buttons second row.
body,
html {
margin: 0;
background: whitesmoke;
}
h1 {
text-align: center;
font-family: cursive;
}
#content {
margin: 2px;
}
.toolbar>div {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
#contain {
background: #EEEEEE;
overflow-y: auto;
}
#marginTop {
margin-top: 15px;
}
#onglets {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
input:hover,
select:hover {
border: 1px solid #B829fA;
}
input:focus {
border: 1px solid #B829BA;
}
select:focus {
border: 1px solid #B829ff;
}
input[type="submit"] {
width: 150px;
float: left;
text-decoration: none;
color: black;
font-family: "Trebuchet MS";
font-size: 14px;
border-radius: 4px;
transition: 0.25s;
background: rgb(250, 250, 252);
border: 1px solid #ccc;
font: inherit;
line-height: 1;
margin: 0.5em;
padding: 1em 2em;
cursor: pointer;
/*box-shadow: 0px 1px 3px #ccc;*/
}
input[type="submit"]:hover {
background: white!important;
color: white!important;
box-shadow: inset 0 0 0 2em #B829fA!important;
border: 1px solid white!important;
text-decoration: underline;
}
input[type="submit"]:focus {
background: white;
color: white;
box-shadow: inset 0 0 0 2em #B829fA;
border: 1px solid white;
}
input[type="submit"]:focusout {
background: white;
color: white;
box-shadow: inset 0 0 0 100% #B829BA;
border: 1px solid white;
}
.inputContent {
min-height: 19px;
}
.contents {
visibility: hidden;
display: none;
}
.border {
border: 1px solid #ccc;
padding: 1px;
padding-left: 3px;
padding-right: 3px;
margin: 2px;
}
.block {
padding: 5px;
border: 1px solid #ccc;
margin-bottom: 15px;
margin-right: 15px;
box-shadow: /*inset*/
0px 1px 3px #ccc;
border-radius: 4px;
background: rgb(250, 250, 252);
width: 100%;
box-sizing: border-box;
}
.block:hover {
border: 1px solid #B829FA;
}
.data,
.divValue {
display: flex;
justify-content: space-between;
padding-bottom: 1px;
padding-top: 1px;
flex-wrap: nowrap;
width: 100%;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.subcontainer {
display: flex;
flex-direction: column;
height: auto;
width: 400px;
justify-content: flex-start;
}
.spanCenter {
display: flex;
justify-content: flex-start;
color: #B829BA;
text-decoration: bold;
padding-bottom: 5px;
padding-top: 5px;
margin-bottom: 5px;
}
.widthContain {
width: 196px;
}
<!DOCTYPE html>
<html>
<body>
<div id="onglets">
<!--Menu-->
<input id="inputGeneral" class="buttonMenu" type="submit" value="General">
<input id="inputConditionement" class="buttonMenu" type="submit" value="Conditionement">
<input id="inputMesure" class="buttonMenu" type="submit" value="Mesure">
<input id="inputMat" class="buttonMenu" type="submit" value="Mat. Dangereuse">
<input id="inputAlgorithme" class="buttonMenu" type="submit" value="Algorithme">
<input id="inputPicking" class="buttonMenu" type="submit" value="Picking">
<input id="inputCode" class="buttonMenu" type="submit" value="Code Barre">
<input id="inputImage" class="buttonMenu" type="submit" value="Image">
<input id="inputInventaire" class="buttonMenu" type="submit" value="Inventaire Tournant">
<input id="inputChamps" class="buttonMenu" type="submit" value="Champs Libres">
</div>
</body>
</html>
you can use media queries you can add these codes to display 10 buttons in big screen
#media (min-width: 1200px){
input[type="submit"] {
width:122px;
float: left;
font-size: 12px !important;
padding: 1em 1em;
}
}
I'm trying to vertically align two left and right floated elements in a nav bar. (Where the 'collapsed' nav bar has had the clearfix hack applied). The height of the navbar is determined by the left floated title (h2, 2em by default). However the right floated element, a form with input and button, doesn't sit centrally even when trying the transform approach to vertically centering items?
If I uncomment the transform vertical alignment approach it just sends form further up (not down and centred).
CodePen(https://codepen.io/yunti/pen/xdvpQK)
https://codepen.io/yunti/pen/xdvpQK
.header {
background-color: darkorange;
}
.header-title {
float: left;
padding-left: 10px;
color: white;
font-weight: 400;
}
.form-header {
float: right;
padding-right: 10px;
/*position: relative;*/
/*top: 50%;*/
/*transform: translateY(-50%);*/
}
.clearfix:after {
content: "";
clear: both;
display: table;
}
input,
button {
vertical-align: middle;
}
.form-control {
margin: 10px;
height: 34px;
width: 180px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 18px;
color: #555;
}
.form-control::placeholder {
color: grey;
}
.btn {
margin-left: 10px;
height: 34px;
padding-left: 12px;
padding-right: 12px;
line-height: 1.42857143;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 4px;
background-color: forestgreen;
font-size: 14px;
font-weight: 400;
color: white;
cursor: pointer;
}
<div class="header clearfix">
<h1 class="header-title">Weather App</h1>
<div class="form-header">
<form class="form-group">
<input class="form-control" type="text" placeholder="St. George, Utah" />
<button class="btn">Get Weather</button>
</form>
</div>
</div>
Flexbox makes this really easy. Just add display: flex; justify-content: space-between; align-items: center; to the parent, and that will separate the elements in the parent and align them vertically.
.header {
background-color: darkorange;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-title {
padding-left: 10px;
color: white;
font-weight: 400;
}
.form-header {
padding-right: 10px;
}
.form-control {
margin: 10px;
height: 34px;
width: 180px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 18px;
color: #555;
}
.form-control::placeholder {
color: grey;
}
.btn {
margin-left: 10px;
height: 34px;
padding-left: 12px;
padding-right: 12px;
line-height: 1.42857143;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 4px;
background-color: forestgreen;
font-size: 14px;
font-weight: 400;
color: white;
cursor: pointer;
}
<div class="header">
<h1 class="header-title">Weather App</h1>
<div class="form-header">
<form class="form-group">
<input class="form-control" type="text" placeholder="St. George, Utah" />
<button class="btn">Get Weather</button>
</form>
</div>
</div>
Or if you don't want to use flexbox, you can use display: table on the parent, display: table-cell on the children in combination with vertical-align: middle
.header {
background-color: darkorange;
display: table;
width: 100%;
}
.header-title {
padding-left: 10px;
color: white;
font-weight: 400;
}
.header-title, .form-header {
vertical-align: middle;
display: table-cell;
}
.form-header {
padding-right: 10px;
text-align: right;
}
.form-control {
margin: 10px;
height: 34px;
width: 180px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 18px;
color: #555;
vertical-align: middle;
}
.form-control::placeholder {
color: grey;
}
.btn {
margin-left: 10px;
height: 34px;
padding-left: 12px;
padding-right: 12px;
line-height: 1.42857143;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 4px;
background-color: forestgreen;
font-size: 14px;
font-weight: 400;
color: white;
cursor: pointer;
vertical-align: middle;
}
<div class="header">
<h1 class="header-title">Weather App</h1>
<div class="form-header">
<form class="form-group">
<input class="form-control" type="text" placeholder="St. George, Utah" />
<button class="btn">Get Weather</button>
</form>
</div>
</div>
You have different amounts of margin on your H1 element ("weather app" -- 22px) and your input/button (10px). Make your margin-top the same on all of these elements.
Here is my JSFiddle...https://jsfiddle.net/5xt7pt7f/
I get that there is a lot going on here, I will try to isolate my issue as best as possible.
There are two parent wrappers...
<div class="video-section">
...
<div class="chat-section">
As you can see in the fiddle, their height is not 100%, it seems to have some sort of max-height because they do not always fill the page. My html structure is something like...
<div id="app">
...
<div class="chat-navbar">....</div>
<div class="chat-wrapper">
<div class="video-section">
<div class="chat-section">
...
#app is the main container. I want .chat-navbar to be at the top and the .chat-wrapper to be below it. I accomplished this through...
div#app {
display: flex;
flex: 1;
flex-direction: column; }
Next I wanted .video-section and .chat-section to be side by side, I accomplished this through...
.chat-wrapper {
display: flex;
flex: 1;
flex-direction: row;
}
However, these two wrappers do not fill the height of the page. I do not care if the canvas elements inside fill the page, but I do need the parent wrappers to fill up the page.
This is what it look like on my local...
As you can see there is a lot of white space at the bottom because the elements do not have full height. I thought flex:1 would have resolved this.
Try using display:flex; on the div containing chat-navbar and chat-wrapper (I gave it id="chatcon") and then use flex-grow:1; on chat-wrapper. I commented one of the canvases and changed navbar color to red, to help notice the difference.
Here's a codepen
body, html {
margin: 0;
font-family: 'Libre Baskerville', serif; }
#chatcon{
min-height:100vh;
display:flex;
flex-direction:column;
}
a {
text-decoration: none;
margin: 5px; }
a:active, a:visited {
color: inherit; }
.chat-wrapper {
display: flex;
flex: 1;
flex-direction: row;
}
.chat-section {
border: none;
border-left: 1px solid #ccc;
box-sizing: border-box;
padding-left: 0.5em;
display: flex;
flex: 1;
flex-direction: column;
margin-left: 5px; }
div#app {
display: flex;
flex: 1;
flex-direction: column; }
.chat-section ul {
overflow-y: auto;
flex: 1;
margin-bottom: 0;
padding-left: 0.5em; }
.chat-section ul li {
text-decoration: none;
list-style-type: none; }
.chat-section ul li + li {
margin-top: 7px; }
.chat-section textarea {
resize: none;
border: none;
border-top: 1px solid #ccc;
box-sizing: border-box;
margin-left: -0.5em; }
.chat-section textarea:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
.video-section {
display: flex;
flex: 1;
text-align: center; }
.videos {
flex: 1;
display: flex;
max-width: 800px;
flex-direction: column;
align-content: stretch; }
.chat-navbar {
border-left: 1px solid #ccc;
box-sizing: border-box;
padding-top: 1em;
display: flex;
flex: 1; }
.localCanvas, .remoteCanvas {
background-color: black;
margin-left: 5px;
margin-right: 5px;
-webkit-box-shadow: 9px 5px 17px -6px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 9px 5px 17px -6px rgba(0, 0, 0, 0.75);
box-shadow: 9px 5px 17px -6px rgba(0, 0, 0, 0.75); }
.localCanvas {
margin-top: 5px;
margin-bottom: 5px; }
canvas.remoteCanvas {
margin-top: 5px; }
.auth-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
flex-direction: column;
background: #004FF9;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(to right, #FFF94C, #004FF9);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to right, #FFF94C, #004FF9);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(to right, #FFF94C, #004FF9);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #FFF94C, #004FF9);
/* Standard syntax */
background-size: cover; }
.loginForm, .registerForm {
width: 500px;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 130px;
left: 0;
right: 0; }
.loginWrap {
width: 500px;
float: left;
height: 100%;
background: rgba(255, 255, 255, 0.75);
-webkit-box-shadow: 4px 3px 14px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 4px 3px 14px -5px rgba(0, 0, 0, 0.75);
box-shadow: 4px 3px 14px -5px rgba(0, 0, 0, 0.75); }
.bodyLogin {
overflow: hidden;
height: 100%; }
.bg_image {
height: 1000px;
width: 100%; }
h1 {
font-family: 'Roboto', sans-serif;
color: #87909c;
font-weight: bolder;
text-align: center;
font-size: 1.5em;
margin-top: 20px; }
img.logo_image {
width: 500px; }
img.title_image {
width: 200px;
margin-left: auto;
display: block;
margin-right: auto;
margin-top: -90px; }
label {
font-size: 12px;
font-weight: bold;
color: #87909c;
float: left;
clear: both;
font-family: 'Roboto', sans-serif;
margin-left: 30px;
margin-top: 15px; }
input[type="text"], input[type="password"] {
float: left;
margin-top: 15px;
clear: both;
margin-left: 30px;
font-size: 1.3em;
width: 80%;
outline: none;
border: none;
padding: 10px;
padding-left: 10px; }
.login_btn, .register_btn {
float: left;
clear: left;
font-family: 'Roboto', sans-serif;
background: #7289da;
border: solid 1px #7289da;
width: 84%;
margin-left: 30px;
margin-top: 50px;
padding: 20px;
border-radius: 5px;
font-size: 1em;
color: white;
cursor: pointer; }
.registerLinkWrap, .loginLinkWrap {
float: left;
clear: left;
margin-left: 30px; }
a.register_link, a.login_link {
float: left;
margin-top: 11px;
font-size: 13px;
color: black;
font-family: 'Roboto', sans-serif; }
a.register_link:hover, a.login_link:hover {
text-decoration: underline; }
p.register_sentence, p.login_sentence {
clear: left;
float: left;
font-size: 12px;
color: #3e4956;
font-family: 'Roboto', sans-serif; }
.errUsername, .errPassword, .errRegister {
float: left;
margin-left: 30px;
margin-top: 3px;
color: red;
font-size: 0.8em;
font-family: 'Roboto', sans-serif; }
.reg_success {
position: absolute;
background: #f2fae3;
width: 100%;
text-align: center;
padding: 10px;
font-family: 'Roboto', sans-serif;
color: #94b639;
border-bottom: solid 3px #94b639; }
.reg_neutral {
display: none; }
/*# sourceMappingURL=styles.css.map*/
.chat-navbar{
flex-shrink:0;
flex-grow:0;
height:70px;
background-color:red;
}
<div id="app">
<div id="chatcon" data-reactroot="">
<div class="chat-navbar">
Logout
</div>
<div class="chat-wrapper">
<div class="video-section">
<div class="videos">
<canvas class="remoteCanvas" width="320" height="240"></canvas>
<!-- <canvas class="localCanvas" width="320" height="240"></canvas> -->
</div>
</div>
<div class="chat-section">
<ul>No messages</ul>
<textarea placeholder="Type a message" rows="2"></textarea>
</div>
</div></div></div>
To simplify your requirement, add relative heights wherever required so that your wrappers occupy the entirety of the page.
Give html, body { height: 100%; } which resolves the majority of issues and then further on.
Created a fiddle for you: https://jsfiddle.net/nashcheez/u7bmL0nm/
body,
html {
margin: 0;
font-family: 'Libre Baskerville', serif;
height: 100%;
}
a {
text-decoration: none;
margin: 5px;
}
a:active,
a:visited {
color: inherit;
}
.chat-wrapper {
display: flex;
flex: 1;
flex-direction: row;
height: 100%;
}
.chat-section {
border: none;
border-left: 1px solid #ccc;
box-sizing: border-box;
padding-left: 0.5em;
display: flex;
flex: 1;
flex-direction: column;
margin-left: 5px;
}
div#app {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
}
.chat-section ul {
overflow-y: auto;
flex: 1;
margin-bottom: 0;
padding-left: 0.5em;
}
.chat-section ul li {
text-decoration: none;
list-style-type: none;
}
.chat-section ul li + li {
margin-top: 7px;
}
.chat-section textarea {
resize: none;
border: none;
border-top: 1px solid #ccc;
box-sizing: border-box;
margin-left: -0.5em;
}
.chat-section textarea:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.video-section {
display: flex;
flex: 1;
text-align: center;
}
.videos {
flex: 1;
display: flex;
max-width: 800px;
flex-direction: column;
align-content: stretch;
}
.chat-navbar {
border-left: 1px solid #ccc;
box-sizing: border-box;
padding-top: 1em;
display: flex;
flex: 1;
}
.localCanvas,
.remoteCanvas {
background-color: black;
margin-left: 5px;
margin-right: 5px;
-webkit-box-shadow: 9px 5px 17px -6px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 9px 5px 17px -6px rgba(0, 0, 0, 0.75);
box-shadow: 9px 5px 17px -6px rgba(0, 0, 0, 0.75);
height: 50%;
}
.localCanvas {
margin-top: 5px;
margin-bottom: 5px;
}
canvas.remoteCanvas {
margin-top: 5px;
}
.auth-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
flex-direction: column;
background: #004FF9;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(to right, #FFF94C, #004FF9);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to right, #FFF94C, #004FF9);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(to right, #FFF94C, #004FF9);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #FFF94C, #004FF9);
/* Standard syntax */
background-size: cover;
}
.loginForm,
.registerForm {
width: 500px;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 130px;
left: 0;
right: 0;
}
.loginWrap {
width: 500px;
float: left;
height: 100%;
background: rgba(255, 255, 255, 0.75);
-webkit-box-shadow: 4px 3px 14px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 4px 3px 14px -5px rgba(0, 0, 0, 0.75);
box-shadow: 4px 3px 14px -5px rgba(0, 0, 0, 0.75);
}
.bodyLogin {
overflow: hidden;
height: 100%;
}
.bg_image {
height: 1000px;
width: 100%;
}
h1 {
font-family: 'Roboto', sans-serif;
color: #87909c;
font-weight: bolder;
text-align: center;
font-size: 1.5em;
margin-top: 20px;
}
img.logo_image {
width: 500px;
}
img.title_image {
width: 200px;
margin-left: auto;
display: block;
margin-right: auto;
margin-top: -90px;
}
label {
font-size: 12px;
font-weight: bold;
color: #87909c;
float: left;
clear: both;
font-family: 'Roboto', sans-serif;
margin-left: 30px;
margin-top: 15px;
}
input[type="text"],
input[type="password"] {
float: left;
margin-top: 15px;
clear: both;
margin-left: 30px;
font-size: 1.3em;
width: 80%;
outline: none;
border: none;
padding: 10px;
padding-left: 10px;
}
.login_btn,
.register_btn {
float: left;
clear: left;
font-family: 'Roboto', sans-serif;
background: #7289da;
border: solid 1px #7289da;
width: 84%;
margin-left: 30px;
margin-top: 50px;
padding: 20px;
border-radius: 5px;
font-size: 1em;
color: white;
cursor: pointer;
}
.registerLinkWrap,
.loginLinkWrap {
float: left;
clear: left;
margin-left: 30px;
}
a.register_link,
a.login_link {
float: left;
margin-top: 11px;
font-size: 13px;
color: black;
font-family: 'Roboto', sans-serif;
}
a.register_link:hover,
a.login_link:hover {
text-decoration: underline;
}
p.register_sentence,
p.login_sentence {
clear: left;
float: left;
font-size: 12px;
color: #3e4956;
font-family: 'Roboto', sans-serif;
}
.errUsername,
.errPassword,
.errRegister {
float: left;
margin-left: 30px;
margin-top: 3px;
color: red;
font-size: 0.8em;
font-family: 'Roboto', sans-serif;
}
.reg_success {
position: absolute;
background: #f2fae3;
width: 100%;
text-align: center;
padding: 10px;
font-family: 'Roboto', sans-serif;
color: #94b639;
border-bottom: solid 3px #94b639;
}
.reg_neutral {
display: none;
}
<div id="app">
<div style="height: 100%;" data-reactroot="">
<div class="chat-navbar">
Logout
</div>
<div class="chat-wrapper">
<div class="video-section">
<div class="videos">
<canvas class="remoteCanvas" width="320" height="240"></canvas>
<canvas class="localCanvas" width="320" height="240"></canvas>
</div>
</div>
<div class="chat-section">
<ul>No messages</ul>
<textarea placeholder="Type a message" rows="2"></textarea>
</div>
</div>
</div>
</div>
I see that you gave div#app both display: flex and flex: 1. Do note that the flex: 1 does not do anything here, it is a flex child property.
So for div#app to fill page it need a height, here given min-height: 100vh. Now you can give for example the <div data-reactroot> element flex: 1 to fill its parent (light blue).
Any child having a parent with display: flex; flex-direction: column only need flex: 1 to fill vertical space, if it has flex-direction: row it will need a height, where height: 100% normally work.
These 2 rules shows how to
div#app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
div[data-reactroot] {
flex: 1;
background: lightblue;
}
Hope this makes it clear how it works, and from here you can apply the same logic your way down in the markup.
body,
html {
margin: 0;
font-family: 'Libre Baskerville', serif;
}
a {
text-decoration: none;
margin: 5px;
}
a:active,
a:visited {
color: inherit;
}
.chat-wrapper {
display: flex;
flex: 1;
flex-direction: row;
}
.chat-section {
border: none;
border-left: 1px solid #ccc;
box-sizing: border-box;
padding-left: 0.5em;
display: flex;
flex: 1;
flex-direction: column;
margin-left: 5px;
}
div#app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
div[data-reactroot] {
flex: 1;
background: lightblue;
}
.chat-section ul {
overflow-y: auto;
flex: 1;
margin-bottom: 0;
padding-left: 0.5em;
}
.chat-section ul li {
text-decoration: none;
list-style-type: none;
}
.chat-section ul li + li {
margin-top: 7px;
}
.chat-section textarea {
resize: none;
border: none;
border-top: 1px solid #ccc;
box-sizing: border-box;
margin-left: -0.5em;
}
.chat-section textarea:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.video-section {
display: flex;
flex: 1;
text-align: center;
}
.videos {
flex: 1;
display: flex;
max-width: 800px;
flex-direction: column;
align-content: stretch;
}
.chat-navbar {
border-left: 1px solid #ccc;
box-sizing: border-box;
padding-top: 1em;
display: flex;
flex: 1;
}
.localCanvas,
.remoteCanvas {
background-color: black;
margin-left: 5px;
margin-right: 5px;
-webkit-box-shadow: 9px 5px 17px -6px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 9px 5px 17px -6px rgba(0, 0, 0, 0.75);
box-shadow: 9px 5px 17px -6px rgba(0, 0, 0, 0.75);
}
.localCanvas {
margin-top: 5px;
margin-bottom: 5px;
}
canvas.remoteCanvas {
margin-top: 5px;
}
.auth-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
flex-direction: column;
background: #004FF9;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(to right, #FFF94C, #004FF9);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to right, #FFF94C, #004FF9);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(to right, #FFF94C, #004FF9);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #FFF94C, #004FF9);
/* Standard syntax */
background-size: cover;
}
.loginForm,
.registerForm {
width: 500px;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 130px;
left: 0;
right: 0;
}
.loginWrap {
width: 500px;
float: left;
height: 100%;
background: rgba(255, 255, 255, 0.75);
-webkit-box-shadow: 4px 3px 14px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 4px 3px 14px -5px rgba(0, 0, 0, 0.75);
box-shadow: 4px 3px 14px -5px rgba(0, 0, 0, 0.75);
}
.bodyLogin {
overflow: hidden;
height: 100%;
}
.bg_image {
height: 1000px;
width: 100%;
}
h1 {
font-family: 'Roboto', sans-serif;
color: #87909c;
font-weight: bolder;
text-align: center;
font-size: 1.5em;
margin-top: 20px;
}
img.logo_image {
width: 500px;
}
img.title_image {
width: 200px;
margin-left: auto;
display: block;
margin-right: auto;
margin-top: -90px;
}
label {
font-size: 12px;
font-weight: bold;
color: #87909c;
float: left;
clear: both;
font-family: 'Roboto', sans-serif;
margin-left: 30px;
margin-top: 15px;
}
input[type="text"],
input[type="password"] {
float: left;
margin-top: 15px;
clear: both;
margin-left: 30px;
font-size: 1.3em;
width: 80%;
outline: none;
border: none;
padding: 10px;
padding-left: 10px;
}
.login_btn,
.register_btn {
float: left;
clear: left;
font-family: 'Roboto', sans-serif;
background: #7289da;
border: solid 1px #7289da;
width: 84%;
margin-left: 30px;
margin-top: 50px;
padding: 20px;
border-radius: 5px;
font-size: 1em;
color: white;
cursor: pointer;
}
.registerLinkWrap,
.loginLinkWrap {
float: left;
clear: left;
margin-left: 30px;
}
a.register_link,
a.login_link {
float: left;
margin-top: 11px;
font-size: 13px;
color: black;
font-family: 'Roboto', sans-serif;
}
a.register_link:hover,
a.login_link:hover {
text-decoration: underline;
}
p.register_sentence,
p.login_sentence {
clear: left;
float: left;
font-size: 12px;
color: #3e4956;
font-family: 'Roboto', sans-serif;
}
.errUsername,
.errPassword,
.errRegister {
float: left;
margin-left: 30px;
margin-top: 3px;
color: red;
font-size: 0.8em;
font-family: 'Roboto', sans-serif;
}
.reg_success {
position: absolute;
background: #f2fae3;
width: 100%;
text-align: center;
padding: 10px;
font-family: 'Roboto', sans-serif;
color: #94b639;
border-bottom: solid 3px #94b639;
}
.reg_neutral {
display: none;
}
/*# sourceMappingURL=styles.css.map*/
<div id="app">
<div data-reactroot="">
<div class="chat-navbar">
Logout
</div>
<div class="chat-wrapper">
<div class="video-section">
<div class="videos">
<canvas class="remoteCanvas" width="320" height="240"></canvas>
<canvas class="localCanvas" width="320" height="240"></canvas>
</div>
</div>
<div class="chat-section">
<ul>No messages</ul>
<textarea placeholder="Type a message" rows="2"></textarea>
</div>
</div>
</div>
</div>