0:02 this is incredibly difficult to build an
0:04 input that grows in size based on the
0:06 amount of content in it requires a ton
0:08 of JavaScript and math and you're
0:09 looking at hundreds of lines of code
0:12 just to make this single input that is
0:14 until the brand new CSS field sizing
0:16 property came out which lets me do all
0:18 of this complicated JavaScript in one
0:19 single line of code in this video I'm
0:21 going to show you what that property is
0:23 all the different edge cases related to
0:26 and the really cool things that it can
0:29 do welcome back to web dev simplified my
0:31 name is Kyle and my job is to simplify
0:32 the web for you so you can start
0:33 building your dream project sooner and
0:35 to demonstrate how this property works I
0:37 just have a couple inputs on our page
0:38 cuz it works differently with different
0:41 types of inputs we have a standard text
0:42 input and that's going to kind of take
0:43 the place of like email and all the
0:46 other standard text style inputs then we
0:48 have a select box and finally we have a
0:50 text area and right now the only CSS
0:51 styles that I have being applied to this
0:53 entire project is just some styles on
0:55 the actual input group itself just to
0:57 stack these vertically over top of each
0:59 other but the actual input select and
1:01 text area have absolutely no CSS being
1:03 applied to them at all so now what I
1:04 want to do is I want to add this brand
1:06 new property to show you how it works by
1:08 default so we can select our input our
1:10 select and our text area and all I'm
1:12 going to do is add that field sizing
1:13 property now this field sizing property
1:15 takes two values fixed is the default
1:18 where it's a fixed size element and then
1:20 content is the new property that's being
1:21 added to this and that essentially
1:22 allows it to scale to the size of the
1:24 content inside of it and I want I save
1:25 you'll notice something kind of
1:27 interesting happens our bio down here
1:29 shrinks down to essentially one pixel
1:30 wide it shrinks down to the exact same
1:32 size as our cursor and that's the
1:34 default Behavior if you don't have any
1:35 width a minimum or maximum set on an
1:37 element it's just going to shrink down
1:39 to the smallest possible size for the
1:40 element and if we have a placeholder you
1:42 can see it shrinks down to the size of
1:43 that placeholder but as soon as I put
1:45 some text inside of here it's now just
1:47 going to be exactly the same size as the
1:48 text that I have inside of here and then
1:50 of course when I have no text it'll be
1:51 that placeholder size and then our
1:53 select box here changed slightly you may
1:55 not have noticed it but now no matter
1:56 what element I select it's actually
1:58 going to change the size of my select
2:00 box to fit the size of that element
2:01 while when I had this property the way
2:03 it was before my select Box is always
2:05 the size of my largest element inside of
2:06 it so it's always going to be the same
2:08 width as this moderator but when I say
2:09 that the field sizing should be content
2:11 it's not going to be based on whatever
2:12 the size of the currently selected
2:14 element is instead of the largest one
2:16 now obviously this isn't super useful
2:17 unless we actually give it some minimum
2:19 and maximum sizes so generally what
2:20 you're going to want to do if you want a
2:22 normal input that expands in width
2:23 you're going to want to give it a
2:25 minimum width so we'll come in here with
2:27 our input element and we'll say that
2:28 we're going to have a minimum width and
2:30 let's just say we want our minimum width
2:32 to be 100 pixels now no matter what my
2:34 element is always going to be at least
2:36 100 pixels wide and as I type inside of
2:38 it as it gets larger than 100 pixels you
2:40 can see the width of this container just
2:41 grows and grows and grows and it's
2:42 actually going to keep growing off the
2:44 edge of my page I generally don't want
2:47 that so a maximum width of 100% is
2:48 probably something that you want so it
2:49 stays within the bounds of its parent
2:52 container now it'll always be at least
2:53 100 pixels wide and as I fill more
2:55 content inside of it it's going to grow
2:57 until eventually it's too large to fit
2:58 in its container and then it'll actually
3:00 become scrollable like like a normal
3:02 input would be now personally I find
3:04 that this field sizing content is only
3:06 somewhat useful on standard inputs
3:07 because generally you don't need scaling
3:09 sized inputs they're just going to be
3:11 100% with all the time and again they're
3:13 not super useful on select elements
3:14 because I don't generally like the size
3:16 of my select element changing based on
3:17 the content inside of it I just want it
3:19 to be one size all the time where this
3:21 really comes in effect is the text area
3:23 that's where I find this the most useful
3:24 so let's come in here with a text area
3:26 and see how this actually works because
3:28 it not only grows horizontally but it'll
3:30 also grow vertically as well so let's
3:31 come in here we'll say our minimum width
3:32 is 100 pixels and let's say our maximum
3:34 width to just be 300 pixels so we can
3:36 see this without me having to type in so
3:38 much text so by default we just have one
3:40 row of 100 pixel wide text and if we
3:42 grow this past 300 pixels you can see
3:43 it's going to wrap on the next line I
3:45 can hit enter a few times and again it's
3:46 going to wrap on to the next line and
3:47 it's just going to constantly be
3:49 wrapping and filling however much space
3:51 I need you can see here my text area is
3:53 just as large as it needs to be to fit
3:54 my content and as soon as I delete it
3:56 down you can see it shrinks down
3:57 generally when I'm using a text area
3:59 what I do is I just hard code the width
4:01 to be something like 100% And now I just
4:03 have a text area that grows in height
4:05 based on how much content I have inside
4:06 of it and a lot of times I may come in
4:08 here with like a height of three RM and
4:09 actually I want to make sure that's a
4:11 minimum height so that I can grow beyond
4:12 that and now it's going to look like a
4:14 general text area but you can see it
4:16 actually is able to grow beyond that
4:17 based on the amount of content inside of
4:19 it now this already covers a lot of the
4:20 content that you need to know about the
4:22 field sizing property there's a few
4:23 extra things you should probably know
4:25 about it specifically related to some
4:26 things with validation so let's say we
4:28 have an input here and let's say I
4:30 specify a Mac max length of 10 that
4:32 means I can have at most 10 characters
4:34 inside of here well this is actually
4:36 going to use that property for field
4:37 sizing and it's going to make sure it's
4:39 stops growing as soon as I get to that
4:41 maximum length so it's com in here 1 2 3
4:44 4 5 6 7 8 9 10 and as soon as I try to
4:45 type anything else you notice my box is
4:47 just going to stop at that exact size no
4:49 matter what other content I try to type
4:50 nothing else is going to get put inside
4:52 of there and if I take a bunch of
4:53 content that's much longer than 10
4:54 characters and I past it inside of here
4:56 you see it's only keeping those first 10
4:57 characters and again a lot of that is to
4:59 do with that max length property but
5:01 again our size is never going to be
5:02 larger than this particular max length
5:04 cuz I can't put any additional content
5:06 inside it here another really important
5:08 thing to note is how this actually works
5:09 with browser support because right now
5:12 it's only supported in chromian based
5:14 browsers that means Chrome Edge and so
5:16 on it's not supported in Firefox or
5:18 Safari which is a bit of a bummer but
5:19 the nice thing about this is in many
5:21 cases this is considered a progressive
5:23 enhancement imagine that you had a form
5:25 just like this where you had a bio field
5:26 that people could type some information
5:28 inside of and normally if you didn't
5:30 have your field site
5:31 you know you would just have this
5:32 minimum height of 3 RM maybe You' make
5:34 it a little bit larger we'll say 5 RM
5:36 and you can see we can type about five
5:37 lines of text inside here before it has
5:39 to create a scroll bar this is generally
5:41 fine for most users but if they're using
5:43 a chromium based browser and they have
5:44 this field sizing property able to be
5:47 used now this actual box can fill in
5:48 whatever size they need based on the
5:50 content they type inside of it so it's a
5:51 really great Progressive enhancement
5:53 where you can throw it into your site
5:54 even if the person's browser doesn't
5:55 support it it just pretends that this
5:57 doesn't exist and you get a normal text
5:59 area that Scrolls while if it does exist
6:01 you can see you get this nice growing
6:03 text area so this is a really great way
6:04 to add this Progressive enhancement to a
6:05 lot of different sites and you don't
6:07 have to write tons of JavaScript to do
6:08 this because in the past this would take
6:10 hundreds of lines of JavaScript to do
6:11 right and now it's just one single line
6:14 of CSS now if you want to stay up to
6:15 date with all the latest and greatest
6:17 CSS features I highly recommend checking
6:20 out my CSS simplified course it covers
6:21 everything you need to know about CSS
6:23 from an absolute beginner all the way up
6:24 to Advanced and intermediate Concepts
6:26 even bleeding edge brand new CSS
6:28 Concepts I'm going to link that course
6:30 down in the description for you again I
6:31 highly recommend you check it out if you
6:33 want to learn and master CSS with that
6:35 said thank you very much for watching
