I have worked on a couple of applications that made me use input fields a lot and trust me, when it comes to making an input field (in my case the text area) have a automated height based on the content, I will have to write a whole lot of JavaScript which is absolutely verbose with the new CSS property called the field-sizing, and we are going to learn how this property can make the job faster by saving a whole lot of time. Ready guys ? let take a walk.
To have the field-sizing work you first;
Select the input and apply the property filed-sizing
textarea { field-sizing:” “; }Now, lets look at the values. There are two values fixed and content, but for this purpose, we will be using the content value.
textarea { field-sizing:”content“; }
what the content values automatically shrink the size of the input to the cursor (or the content of the input) and this is not what we want.Set a the width of the input to have the desired result. Example.
textarea {
min-width: 10rem;
field-sizing:”content“;
}
and with this even ever the user types it automatically moves to the next line. Is this not amazing.
NOTE: The field-sizing property affects both the width and height of the element that is why you can have the textarea input increase in height automatically.
CAVET: This is a very amazing property, but it is only supported in chromium browsers (Chrome, Edge Brave, Opera, etc.) so, we will have to look for a walk around in Firefox and Safari. Hope they support this soon enough.
- Happy Coding