I made a simple example of my issue here.
I want the button to be of the same width as the input field.
The only thing is, there's a padding-left of 1rem on the input field because I don't want the placeholder sticking directly to the left side of the field.
I assume that has to do with the solution to this, but I'm stuck.
Help much appreciated!
html {
font-size: 12px;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
width: 20rem;
padding: 1em;
background-color: #F00;
}
.form-control {
width: 100%;
border: 0;
padding-left: 1rem;
margin-bottom: 1rem;
color: #000;
}
.btn-sub {
width: 100%;
}
<div class=container>
<form class=login-form>
<input class="form-control" placeholder="Enter your email">
<button class="btn-sub">Subscribe</button>
</form>
</div>
Adjust the box-sizing of the children to border-box...
form.login-form * {
box-sizing: border-box;
}
html {
font-size: 12px;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
width: 20rem;
padding: 1em;
background-color: #F00;
}
.form-control {
width: 100%;
border: 0;
padding-left: 1rem;
margin-bottom: 1rem;
color: #000;
}
form.login-form * {
box-sizing: border-box;
}
.btn-sub {
width: 100%;
}
<div class=container>
<form class=login-form>
<input class="form-control" placeholder="Enter your email">
<button class="btn-sub">Subscribe</button>
</form>
</div>
Just add *{box-sizing:border-box;} to CSS
*{box-sizing:border-box;}
html {
font-size: 12px;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
width: 20rem;
padding: 1em;
background-color: #F00;
}
.form-control {
width: 100%;
border: 0;
padding-left: 1rem;
margin-bottom: 1rem;
color: #000;
}
.btn-sub {
width: 100%;
}
<div class=container>
<form class=login-form>
<input class="form-control" placeholder="Enter your email">
<button class="btn-sub">Subscribe</button>
</form>
</div>
Add box-sizing: border-box; css propertiy in .form-control class
Related
In a (React/TS) form i need to move the label for the inputfield when;
The input has the focus
When the placeholder is not shown
This works fine for the first objective (with .grid__item--fixedrowcolone), but i am unable to to realise this for the second. The input and the label are grid elements so i can place the input and label on top and vertically center both.
What i unsuccessfully tried is (multiple variants) of the snippet below.
.grid__item--fixedrowcolone {
&:not(~ .form__inputfield:placeholder-shown) {
color: green;
}
}
react form
<div className={styles.form__inputwrapper} data-testid='form-input'>
<div className={styles.form__inputsymbol} data-testid='form-input-icon'>
<img src={lockSvg} alt='lock' width='24' height='24' />
</div>
<div className={styles.grid__container} data-testid='form-input-field'>
<div className={styles['grid__item--fixedrowcolone']}>
<input
className={styles.form__inputfield}
type='text'
pattern='^.*{8,}'
id='pwd1'
name='pwd1'
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder=' '
required
data-testid='forminput-input'
/>
</div>
<div className={styles['grid__item--fixedrowcoltwo']}>
<label
className={styles.form__inputlabel}
htmlFor='pwd1'
data-testid='forminput-inputlabel'
>
wachtwoord
<span className={styles.form__inputlabelvalmsg}>
+312234
</span>
</label>
</div>
</div>
</div>
css module.scss
.grid {
&__container {
display: grid;
justify-items: stretch;
}
&__item {
&--fixedrowcolone, &--fixedrowcoltwo {
display: flex;
grid-column: 1;
grid-row: 1;
}
}
}
.form {
&__inputwrapper {
display: flex;
margin-bottom: 10px;
position: relative;
background: var(--theme_form_field_bg_color);
border-radius: 4px;
}
&__inputsymbol {
display: flex;
align-self: center;
//align-items: center;
padding-left: 10px;
pointer-events: none;
color: var(--theme_fg_color);
font-size: 1.5em;
transition: all 0.4s;
filter: var(--theme_fg_color_filter)
}
&__inputfield {
align-self: center;
//line-height: 1.2;
font-size: 1.5em;
height: 50px;
color: var(--theme_fg_color);
background: none;
outline: none;
border: none;
max-width: 280px;
min-width: 250px;
overflow: visible;
touch-action: manipulation;
}
&__inputlabel {
align-self: center;
//line-height: 1.2;
font-size: 1.5em;
transition: .3s all ease;
}
&__inputlabelvalmsg {
display: none;
}
}
.grid__item--fixedrowcolone {
&:focus-within ~ .grid__item--fixedrowcoltwo {
top: 5px;
font-size: .5em;
align-self: start;
}
}
Unfortunately it is yet not possible to select elements based on presence of child elements or child element pseudo selectors. So therefore i reverted back to absolute positioning to overlay two elements.
react form
<div className={styles.form__inputwrapper} data-testid='form-input'>
<div className={styles.form__inputsymbol} data-testid='form-input-icon'>
<img src={lockSvg} alt='lock' width='24' height='24' />
</div>
<div
className={styles.form__inputfieldwrapper}
data-testid='form-input-field'
>
<input
className={styles.form__inputfield}
type='text'
pattern='^.*{8,}'
id='pwd1'
name='pwd1'
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder=' '
required
data-testid='forminput-input'
/>
<label
className={styles.form__inputlabel}
htmlFor='pwd1'
data-testid='forminput-inputlabel'
>
wachtwoord
<span className={styles.form__inputlabelvalmsg}>
+31652693 of 0652786518
</span>
</label>
</div>
</div>
css module.scss
#mixin inputlabel-defaults() {
font-size: 1.5em;
align-self: center;
}
.form {
&__inputwrapper {
display: flex;
margin-bottom: 10px;
position: relative;
background: var(--theme_form_field_bg_color);
border-radius: 4px;
}
&__inputfieldwrapper {
display: flex;
}
&__inputsymbol {
display: flex;
align-self: center;
//align-items: center;
padding-left: 10px;
pointer-events: none;
color: var(--theme_fg_color);
font-size: 1.5em;
transition: all 0.4s;
filter: var(--theme_fg_color_filter)
}
&__inputlabel {
position: absolute;
transition: .3s all ease;
#include inputlabel-defaults();
}
&__inputlabelvalmsg {
display: none;
}
&__inputfield {
align-self: center;
//line-height: 1.2;
font-size: 1.5em;
height: 50px;
color: var(--theme_fg_color);
background: none;
outline: none;
border: none;
max-width: 280px;
min-width: 250px;
overflow: visible;
touch-action: manipulation;
&:focus-within ~ .form__inputlabel {
top: 5px;
font-size: .5em;
align-self: start;
}
&:not(:placeholder-shown) ~ .form__inputlabel {
color: red;
top: 5px;
font-size: .5em;
align-self: start;
}
&:placeholder-shown ~ .form__inputlabel {
top: unset;
#include inputlabel-defaults();
}
}
}
I am trying to create a navbar with two "lines".
The first line would include some links and the second one a HTML select with a submit.
The code below generates the navbar like this:
body {
margin: 0;
}
.navbar {
display: flex;
flex-wrap: wrap;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar-item {
background-color: #333;
/*flex-grow: 4;*/
}
.navbar-search {
background-color: #333;
align-self: center;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="navbar">
<div class="navbar-item">Home</div>
<div class="navbar-item">Links</div>
<div class="navbar-item">Contact</div>
<div class="navbar-search">
<select name="slct" id="my-slct">
<option value="">--Please choose an option--</option>
</select>
<input type="submit" />
</div>
</div>
I tried to add some <br /> but it didn't do the job.
How can I put the search div right below the home link?
Add width: 100% on .navbar-search
body {margin:0;}
.navbar {
display: flex;
flex-wrap: wrap;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar-item {
background-color: #333;
/*flex-grow: 4;*/
}
.navbar-search {
background-color: #333;
align-self: center;
padding: 0 15px 10px;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
<div class="navbar">
<div class="navbar-item">Home</div>
<div class="navbar-item">Links</div>
<div class="navbar-item">Contact</div>
<div class="navbar-search">
<select name="slct" id="my-slct">
<option value="">--Please choose an option--</option>
</select>
<input type="submit" />
</div>
</div>
If you don't want the search item to take up the full width of the navbar, you can force a line break with a "collapsed row":
body {
margin: 0;
}
.navbar {
display: flex;
flex-wrap: wrap;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar-item {
background-color: #333;
/*flex-grow: 4;*/
}
.navbar-break {
flex-basis: 100%;
height: 0;
}
.navbar-search {
background-color: #333;
align-self: center;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="navbar">
<div class="navbar-item">Home</div>
<div class="navbar-item">Links</div>
<div class="navbar-item">Contact</div>
<div class="navbar-break"></div>
<div class="navbar-search">
<select name="slct" id="my-slct">
<option value="">--Please choose an option--</option>
</select>
<input type="submit" />
</div>
</div>
Breaking to a new row with flexbox | Tobias Ahlin
In my code (see below) I want to set the colour of placeholder i.e Username and Password and a margin below it to white.
Means the Username and password text should be of white colour and border below it should also be of white colour as i am using a dark back-ground colour.
How can I achieve that?
Html
<mat-card class="login">
<form >
<mat-form-field color="accent" autocomplete="off" class="form">
<input class="inputField" maxlength="10" matInput [placeholder][1]="Enter Username" [formControl]="">
</mat-form-field>
<br>
<mat-form-field color="accent" autocomplete="off" class="form">
<input class="inputField" maxlength="10" type="password" matInput placeholder="Enter Password" [formControl]="">
</mat-form-field>
<div>
<button mat-button class="otp-btn" type="submit">Login</button>
</div>
<br>
</form>
</mat-card>
CSS
.example-container {
display: flex;
flex-direction: column;
}
.login {
margin-top: 80px;
height: 450px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #274c7c
}
.material-icons {
margin-left: 2%;
margin-bottom: 10px;
}
.otp-btn {
margin: 30px 30px 30px 30px;
margin-left: 10%;
width: 80%;
font-size:30px;
height: 55px;
color:white;
border-radius: 10px;
background-color: #f6b319;
}
:host {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
img {
height: 16%;
width: 174px;
margin-left: 15%;
margin-right: auto;
padding: 10px;
}
div.input {
position: relative;
}
.form {
display: block;
position: relative;
flex: auto;
min-width: 0;
width: 245px !important;
margin-left:15px;
}
.inputField
{
width: 90%;
font-size: 20px;
}
div.input label {
position: absolute;
top: 0;
transform: translateY(-50%);
left: 10px;
background: white;
padding: 5px 2px;
color: white;
}
div.input input {
padding: 10px 20px;
font-size: 25px;
outline: 0;
color: white;
}
div.input {
margin-top: 20px;
color: white;
}
.example-container > * {
width: 100%;
}
See stackBliz for more details.
Add this to css
::ng-deep .mat-form-field-underline, ::ng-deep .mat-form-field-ripple {
background-color: white !important;
color: white !important
}
::ng-deep .mat-form-field-empty.mat-form-field-label {
color: white;
}
After focusing on the input, you can insert the following code to stylize the placeholder after the animation:
::ng-deep .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
color: beige;
font-family: lobster;
}
I have a really quick question. I have developed this css and html with the help of a YouTube tutorial as well as the community. However, I do have a problem and I have spent a good hour trying to solve it but have had no luck. When I resize the window, the vertical line in the center of the page (div="splitter") disappears and there is no space on the left-hand side the input fields either. Can someone please explain why?
Also, if you guys would not mind how does my css code look? Is it correct?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* :focus {
outline: none;
}
body {
background-color: #ced4da;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
display: flex;
}
.login-form {
flex: 1;
justify-content: flex-end;
display: flex;
}
.login-form input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
padding-left: 60px;
margin-bottom: 10px;
width: 100%;
}
.login-form input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
font-size: 15px;
width: 300px;
font-weight: lighter;
}
form {
align-self: center;
}
.splitter {
background-color: grey;
width: 0.5px;
height: 180px;
align-self: center;
margin-right: 40px;
margin-left: 50px;
}
.side-text {
flex: 1;
align-self: center;
line-height: 30px;
}
.side-text h2 {
font-weight: normal;
}
.side-text p {
font-weight: lighter;
}
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" placeholder="Email" name="emailPost">
</div>
<div class="password-input-field">
<input type="password" placeholder="Password" name="passwordPost">
</div>
<div class="submit-button">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div class="splitter"></div>
<div class="side-text">
<h2>Cold Ops</h2>
<p>ADMINISTRATION PANEL</p>
</div>
</div>
You have 0.5px width on your splitter. I tried brining it up to 1px, but saw that it did not help. What did seem to work was setting min-width to 1px as well.
Your css looks OK, but I would suggest looking more into how flex-box works, here is a good article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The reason why there is no space on the left side is because you have not set any. Did you perhaps mean to set the margin-left to something instead of padding-left?
Perhaps it happens due to flexbox. I made it work via border. Now it works as expected since border isn't affected by possible dynamic width.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* :focus {
outline: none;
}
body {
background-color: #ced4da;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
display: flex;
}
.login-form {
flex: 1;
justify-content: flex-end;
display: flex;
}
.login-form input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
padding-left: 60px;
margin-bottom: 10px;
width: 100%;
}
.login-form input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
font-size: 15px;
width: 300px;
font-weight: lighter;
}
form {
align-self: center;
}
.splitter {
background-color: grey;
border-left: 1px solid black;
height: 180px;
align-self: center;
margin-right: 40px;
margin-left: 50px;
}
.side-text {
flex: 1;
align-self: center;
line-height: 30px;
}
.side-text h2 {
font-weight: normal;
}
.side-text p {
font-weight: lighter;
}
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" placeholder="Email" name="emailPost">
</div>
<div class="password-input-field">
<input type="password" placeholder="Password" name="passwordPost">
</div>
<div class="submit-button">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div class="splitter"></div>
<div class="side-text">
<h2>Cold Ops</h2>
<p>ADMINISTRATION PANEL</p>
</div>
</div>
I have one simple question :
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-image: url("IMG/tlo.jpg");
background-size: cover;
font-family: "Titillium Web", sans-serif;
}
.top-container {
display: flex;
justify-content: center;
align-items: center;
opacity: 0.42;
margin-top: 1rem;
}
.main-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 1200px;
align-items: center;
align-content: center;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
margin: 0 -5px;
}
.h2 {
font-size: 2rem;
text-shadow: 1px 2px 2px #2b0100;
color: #FFFFFF;
}
.rf-container {
display: flex;
margin: 0 55px;
width: 380px;
background-color: #f4f4f4;
padding: 20px 20px;
box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.24);
}
.form-rf {
display: flex;
flex-direction: column;
flex: 1;
}
.rf-element {
display:flex;
background-color: #f8f8f8;
border: 1px solid #c6c6c6;
border-radius: 2px;
margin-bottom: 1.25rem;
height: 2.5rem;
width: 340px;
}
.rf-element:hover {
border-color: #88c814;
}
.main-icon {
width: 45px;
flex: 2;
color: #dedede;
font-size: 1.375rem;
text-align: center;
padding-top: 1%;
}
.main_field {
flex: 10;
height: 100%;
border: none;
background-color: #f8f8f8;
font-family: 'Titillium Web', sans-serif;
font-size: 1rem;
color: #afafaf;
padding-left: 3%;
outline: none;
border-style: none;
}
.main_field:focus {
color: #428c42;
box-shadow: 0 0 10px 2px rgba(204,204,204,0.9);
border: 2px solid #a5cda5;
background-color: #e9f3e9;
}
.separator {
display: flex;
width: 5px;
min-height: 100%;
background-color: #dedede;
border-top: 0.1875rem solid #f8f8f8;
border-bottom: 0.1875rem solid #f8f8f8;
}
/* checkbox */
.checkbox-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 0.3125rem;
cursor: pointer;
}
.checkbox-custom-label{
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before{
content: '';
background: #fff;
border: 0.125rem solid #ddd;
display: inline-block;
vertical-align: middle;
width:1.25rem;
height: 1.25rem;
padding: 0.125rem;
margin-right: 0.625rem;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "";
background: #428c42;
}
/* checkbox end */
.main_green_button {
margin-top: 0.5rem;
width: 100%;
border: 0.0625rem solid #3b9a00;
border-radius: 0.125rem;
font-size: 1.5rem;
font-family: 'Titillium Web', sans-serif;
color: #FFFFFF;
text-shadow: 0.0625rem 0.0625rem #51850e;
background: linear-gradient(#a3d840, #73b618);
height: 3rem;
box-shadow: 0.0625rem 0.0625rem 0.0625rem 0px #FFFFFF;
cursor: pointer;
}
.main_green_button:hover {
background: linear-gradient(#AAE650, #7DC323);
}
.main_green_button_smaller {
height: 2.1875rem;
font-size: 1rem;
width: 45%;
}
.main_green_button_smaller-disabled {
opacity: 0.5;
cursor: no-drop;
}
.main_green_button_smaller-warning {
background: linear-gradient(#f65e70, #f03747);
border: 1px rgba(209, 18, 18, 0.616);
}
.main_green_button_smaller-warning:hover {
background: linear-gradient(#FF697D, #FA4155);
}
/* button end */
/* text area*/
.textarea {
width: 100%;
margin-bottom: 1.25rem;
background-color: #f8f8f8;
border: 0.0625rem solid #c6c6c6;
border-radius: 1.5px;
font-family: 'Titillium Web', sans-serif;
font-size: 1rem;
color: #afafaf;
resize: none;
}
.doublebtn {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
opacity: 0.5;
}
.footer_top {
margin: 3.125rem 0px 0.5rem 0px;
}
/* MEDIA*/
#media only screen and (max-width: 945px) {
.main-container {
max-height: 3100px;
}
}
#media only screen and (max-width: 480px) {
.main-container {
margin: 0 auto;
}
.rf-container {
margin: 0 auto;
}
.rf-element {
}
.main_field {
}
.doublebtn {
}
}
<section class="main-container">
<!-- REGISTER FORM -->
<h2 class="h2">Register Form</h2>
<div class="rf-container">
<form action="" class="form-rf">
<!-- REGISTER FORM / 1 row -->
<div class="rf-element">
<div class="main-icon">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="separator"></div>
<input class="main_field" type="text" name="username"placeholder="Username" onfocus="this.placeholder=''" onblur="this.placeholder='Username'" required>
</div>
<!-- REGISTER FORM / 2 row -->
<div class="rf-element">
<div class="main-icon">
<i class="fa fa-lock" aria-hidden="true"></i>
</div>
<div class="separator"></div>
<input class="main_field" type="password" name="password"placeholder="Password"
onfocus="this.placeholder=''" onblur="this.placeholder='Password'" required>
</div>
<!-- REGISTER FORM / 3 row -->
<div class="rf-element">
<div class="main-icon">
<i class="fa fa-lock" aria-hidden="true"></i>
</div>
<div class="separator"></div>
<input class="main_field" type="password" name="Confirm Password"placeholder="Confirm Password" onfocus="this.placeholder=''" onblur="this.placeholder='Confirm Password'" required>
</div>
<!-- REGISTER FORM / 4 row -->
<div class="rf-element">
<div class="main-icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="separator"></div>
<input class="main_field" type="email" name="Email"placeholder="Email" onfocus="this.placeholder=''" onblur="this.placeholder='Email'" required>
</div>
<!-- REGISTER FORM / 5 row -->
<div class="rf-element">
<div class="main-icon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
<div class="separator"></div>
<select class="main_field" name="location" required>
<option value="" disabled selected>Your Location</option>
<option value="gdansk">Gdańsk</option>
<option value="krakow">Kraków</option>
<option value="poznan">Poznań</option>
<option value="warszawa">Warszawa</option>
<option value="wroclaw">Wrocław</option>
</select>
</div>
<!-- REGISTER FORM / 6 row -->
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" >
<label for="checkbox-1" class="checkbox-custom-label">I have read and accept the terms of use.</label>
<!-- REGISTER FORM / sign in -->
<input class="main_green_button" type="submit" value="Sign up">
</form>
</div>
</section>
codepen all
when I try make responsive,u see that forms do not fit on the page.
In fact, no element is responsive despite the use FLEXBOX.
I tried to combine using values flex: 1 1 auto; or flex: 1 1 80% an excuse for .main-field input .
In short - I would like to receive responsive forms, but at the moment I have no idea how to deal with it.