• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 17694
  • Last Modified:

Size for textarea without cols or rows

I want to specify the size of a text area that displays text but with only CSS, is this possible?

Example :

<textarea name="Data" id="Data"></textarea>

#Data {
      max-height : 400px;
      height : 60%;
      max-width : 630px;
      width : 95%;
}
0
Adesso21
Asked:
Adesso21
1 Solution
 
Diablo84Commented:
Thats the right idea but while max-height and max-width is supported by Mozilla/Firefox is it not by IE.

So you might be better off with a fixed pixel width and height, eg:

#Data {
     height: 400px;
     width: 630px;
}

This may be worth a read: http://www.svendtofte.com/code/max_width_in_ie/
0
 
COBOLdinosaurCommented:
Why do you want to put a square peg in a round hole.  The rows and cols attribute are the correct way to dimension texareas in every current standard including XHTML.

This is CSS overkill IMO.

The page starts with HTML.  You use the tags and attributes to define the the required structures and you use the attributes to support the function they must perform to work with the data.  You are short butchering a data container by mixing content and presentation.  Use CSS fot its intende purpose, presentation and layout management.  Don't misuse it by replacing the valid attributes of the tags that are sensitive to content.

If the rows and cols attribute were intended to be replace by CSS they would have been depreciated along with a lot of other legacy attributes that are unnecessary.

Cd&
0
 
GrandSchtroumpfCommented:
The cols and rows are mandatory in the html, but you can overwrite them with the CSS.

I think it's a good idea to use a percentage width, this way you can resize the textarea... just like the one i'm currently typing in.
Cols don't make much sense to me because they don't match the character width, especially when using variable-width fonts ;-).

I would use "rows" to specify the height.
Using rows allow you to specify the number of lines that will be visible (no matter what font and font-size you use).
This makes more sense than specifying a pixel or percentage size.

So, this is what i would use:


<textarea name="Data" id="Data" rows='15' cols='48'></textarea>
#Data {
     width : 95%;
}
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Adesso21Author Commented:
Thaks  GrandSchtroumpf

I managed to get the textarea to display like I want using the suggestions you made. It seems that the cols and rows are going to be around for a while then I guess..

The reason why I wanted to do this was I have a generic template that edit objects in a DB. I wanted the text area to grow depending on the actual content from the DB, but it seems that that dream has been demolished by reality.

I'll play some more with the styles and HTML and post the final conclusion I get to here.. thanks for the input guys.
0
 
Adesso21Author Commented:
<style>
TEXTAREA {
      max-height : 400px;
      height : 90%;
      max-width : 630px;
      width : 95%;
}
</style>

<textarea name="Data" id="Data" cols="64" rows="12"></textarea>

That is the best I could get it. Seeing that I can manupulate the surrounding tags I can rewrite the actual display of the text area even if I told it that it should be 64 cols and 12 rows .. just wrap it in a table and resize with a class or id selector.

As  Cd& said "This is CSS overkill IMO."

I tend to agree. With no styles in some weird case the data still retains a usable disply size.



0
 
GrandSchtroumpfCommented:
thanks for the points
<:°)
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now