Input is compressed when the user starts typing
Contact fields on my website shrink as soon as a user starts typing on a mobile device. I could not detect this behavior in a desktop browser of any size.
The contact field is structured with relativally new css grid
.
How to recreate the error:
- Open my website on your mobile device.
- Scroll down to the input field
- Focus one thing and start typing
I already tried to fix this by applying width
and min-width
to the inputs, but that didn't fix it.
I have collected information in a spreadsheet about different browsers and devices to see if the error appears or not.
https://docs.google.com/spreadsheets/d/1D3_7zh8u2MFAx5vt_mKCA9bjEI9crdDwwOSlucLLwfM/edit?usp=sharing
I think it might be a browser bug since css grid
relatively new ?! Can you recreate the error? Do you have any ideas on how to fix this other than deleting css grid
and structuring it with flexbox
?
I would like to try to get notified of all browsers if they seem to be a browser bug so they can fix it ...
/*I actually use SCSS so this code will not run */
/* The grid */
.grid__form {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas: "name email" "textarea textarea" "feedback submit";
grid-gap: 10px;
@media screen and (max-width: 500px) {
grid-template-columns: 100%;
grid-template-areas: "feedback" "name" "email" "textarea" "submit";
}
/* The contact form */
.contact {
grid-area: contact;
margin-bottom: 100px;
&__header {
font-size: 500;
color: $text-dark-primary;
font-size: 2rem;
text-align: center;
margin: 0 0 30px 0;
@media screen and (max-width: 500px) {
font-size: 1.5rem;
}
&--link {
text-decoration: none;
color: rgba($color-secondary-400, 0.87);
cursor: pointer;
transition: $transition-standard;
@media screen and (max-width: 359px) {
font-size: 1.3rem;
}
&:hover {
text-decoration: underline;
}
}
}
&__input {
font-family: 'Roboto', 'Noto Sans', sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 0.5em;
border: 2px solid rgba(black, 0.20);
border-radius: 2px;
width: 100%;
min-width: 100%;
color: $text-dark-primary;
background-color: white;
cursor: text;
outline: none;
transition: $transition-standard;
&--name {
grid-area: name;
}
&--email {
grid-area: email;
}
&--textarea {
grid-area: textarea;
resize: none;
min-height: 250px;
}
&:focus {
border: 2px solid $color-secondary-200;
width: 100%;
min-width: 100%;
}
}
&__submit {
font-family: 'Roboto', 'Noto Sans', sans-serif;
line-height: 1.5;
grid-area: submit;
justify-self: end;
}
&__feedback {
grid-area: feedback;
align-self: center;
margin: 0;
font-size: 1rem;
font-weight: 500;
}
}
<form class="contact__form grid__form" action="_assets/php/sendMail.php" method="POST" novalidate>
<input id="name" class="contact__input contact__input--name" type="text" name="name" placeholder="Name" />
<input id="email" class="contact__input contact__input--email" type="email" name="email" placeholder="Email" />
<textarea id="message" class="contact__input contact__input--textarea" type="text" name="message" placeholder="Message"></textarea>
<p class="contact__feedback"></p>
<button class="contact__submit button--raised" type="submit">submit</button>
</form>
source to share
The problem can be caused by items input
like grid items. Some browsers can be fancy with form elements in a grid container as the technology is so new.
Instead, wrap each input
in a div. These divs now become grid items and the inputs become their children (and now fall outside of the grid layout).
Specify input
a, if necessary width: 100%
.
source to share