homepage Welcome to WebmasterWorld Guest from 54.205.144.54
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
brokaddr




msg:4563023
 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).

 

rainborick




msg:4563110
 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.

COBOLdinosaur




msg:4563149
 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.

Cd&

lucy24




msg:4563208
 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;} }
</style>

.. 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.

brokaddr




msg:4563308
 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