Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Form Basics The Textarea Element

Posted by Aaron Callagher
Aaron Callagher
4,170 Points

Is there a way to make the textarea resizable on only one axis? Like, can you keep it a fixed width, but adjust height?

...

rajbee
rajbee
6,657 Points
rajbee
rajbee
6,657 Points

yes, there is a small bug in the code. The form expands beyond the side of the gray form container. the fix is to be applied in the media query. 

@media screen and (min-width: 480px) {

  form {
    max-width: 480px;
  }
  #bio {
    resize: vertical;
  }
}
lauraniebel
lauraniebel
4,685 Points
lauraniebel
lauraniebel
4,685 Points

Sorry for commenting on such an old thread... but I believe 'resize: vertical' has to be inserted in the normal, non-media query CSS, otherwise the text field can still be resized horizontally at certain screen sizes.

Anyway, thanks for the hint Rajesh, I wasn't aware of the resize feature before.

2 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Aaron,

You most certainly can, have a read through the details for the resize property at the below link which allows you to specify in which axis the textarea can expand from.

https://developer.mozilla.org/en-US/docs/Web/CSS/resize

Happy coding!

Aaron Callagher
Aaron Callagher
4,170 Points

Very cool. Thanks!

rajbee
rajbee
6,657 Points
rajbee
rajbee
6,657 Points

Chris, how do you read and interpret the MDN docs like the one you gave ? I mean, what is the meaning of all those things "Inherited", "Applies to", ..., "computed value", "canonical order" etc ?

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Raj B,

Let's go through them one-by-one.

Inherited

This is common to all CSS properties, it means does the property value get inherited from a parent that it may reside within, for example: resize can't be inherited as it only applies to the direct element it's declared on.

Applies to

This implies a circumstance(s) in which the property, in this case resize, applies to. Basically, it's saying that if you don't apply the property overflow with a value of visible, the resize property will work. However, if you do apply the property overflow with a value of visible you won't see a grab control in the bottom right corner due to a restriction in the W3C implementation.

Computed value

This one also varies between properties but for resize it's quite simple, as we can only use keywords the computed value is the keyword itself meaning that's what we would see in the browser when using the Chrome developer tools for instance.

In other cases, we could use a value such as none which for some properties results in a computed value of 0.

Canonical order

This really doesn't apply to the resize property as it only accepts a single value, for other properties such as background for instance, there are some restrictions in the way you can order the values due to limitations set by the W3C and browser vendors alike.

Hope that helps.

Karl Jones
Karl Jones
8,761 Points
Karl Jones
Karl Jones
8,761 Points

Alternatively, in css try: textarea {max-width:100%} works for me whilst still allowing vertical adjustability :)