homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Auto-resize of textarea based on screen size

Msg#: 4563021 posted 7:41 am on Apr 9, 2013 (gmt 0)

I have:
textarea{resize:both;} present, however, the textarea does not resize itself on smaller resolutions.

Is there something else required to make this work, or is this simply the handle offered by Firefox/Chrome? (the icon present in the corner of every textarea that allows you to drag/widen the textarea box)

I would like the textarea to shrink itself if the screen size is smaller than 300px (for example).



WebmasterWorld Senior Member 10+ Year Member

Msg#: 4563021 posted 2:51 pm on Apr 9, 2013 (gmt 0)

The CSS property 'resize' controls whether or not the user can manually resize an element. It won't work automatically based on the screen resolution. You'll have to rely on 'height' and 'width' settings.


Msg#: 4563021 posted 4:33 pm on Apr 9, 2013 (gmt 0)

If you do the width as a percentage it will adjust to the width if the viewport automatically.



WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4563021 posted 7:39 pm on Apr 9, 2013 (gmt 0)

If you've never tried this, paste it into a new html doc and give it a whirl. It's lots of fun. Disclaimer: This is paraphrased from an earlier post-- by someone else --somewhere in this forum, but I can't find it so I can't give credit where credit is due.

<style type = "text/css">
@media screen
{ body {background-color: #CCC;} }

@media screen and (max-width:1200px)
{ body {background-color: gray;} }

@media screen and (max-width:960px)
{ body {background-color: #F66;} }

@media screen and (max-width:700px)
{ body {background-color: #99F;} }

@media screen and (max-width:480px)
{ body {background-color: #696;} }

.. and then any old thing in the body. This only works if the sizes go from largest to smallest. Or, of course, the other way around if you're using min-width.

Once you have this concept, you can put in any style variations you like. For example, change the percentages themselves: 8% margins for a desktop, 4% for tablets, 2% for phones. Or display of navigation headers coded as lists: inline-block for monitors that have enough room; block for small ones.


Msg#: 4563021 posted 1:30 am on Apr 10, 2013 (gmt 0)

rainborick - Thanks for the explanation. Looks as though I misunderstood the property, which explains why I couldn't figure this out. :)

I got it to work by setting the width: in CSS as suggested.

lucy24 - I've been converting my site to responsive. The @media adjustments are one of the coolest things I've encountered since first learning html in the late 90s!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved