asp.net c# asp:TextBox, How to remove the cols and rows attributes?

Question

i have a asp:TextBox control on the page. i'm setting it to a TextMode="MultiLine", I am not setting a number of rows or columns. I am setting a width and height in CSS for the control.

asp.net is still adding, what i assume is a default, rows and cols attributes on the rendered control. cols="20" and rows="2" this isnt an issue in any sane, browser, but in IE the CSS height is ignored and only 2 rows of space is show.

How can I prevent these attributes from showing up on the rendered control?

Edit:

This is an issue only in IE8 in compatibility mode, IE7 and IE6. I'm not worried about IE6, but IE7 needs to work.

Answer 1

It works fine if you are using Height and Width for the TextBox. Did you try that?

EDIT

When you use Width, Height the control is pushing these details as Height and Width in style. Textbox doesn't support Style property directly AFAIK.

<textarea name="ctl00$MainContent$TextBox1" id="MainContent_TextBox1" style="width: 200px; height: 300px; font-family: Courier New; font-size: larger;" rows="2" cols="20"/>

When you ignore setting the height and width, it simply doesn't add Width and Height to your control. As you can see, rows="2" Cols="20" stays the same.

<textarea name="ctl00$MainContent$TextBox1" id="MainContent_TextBox1" style="font-family: Courier New; font-size: larger;" rows="2" cols="20"/>

Answer 2

External CSS (do not mix inline and external CSS):

.myTextBox
{
    height: 40px; 
    width: 220px;
}

<asp:TextBox ID="TextBox1" CssClass="myTextBox" runat="server"></asp:TextBox>

Note that a height of 100% will give you a default single line height - basically no effect. If you want multi-line, then simply use pixels in the CSS.

Generated markup:

<input name="TextBox1" type="text" id="TextBox1" class="myTextBox" />

The CSS height setting works just fine to give a double row effect.

Best approach here is to test it in its most basic form and progressively enhance it across the different browsers.

UPDATE

ASP.NET is using the CSS values instead of setting the Rows and Columns equivalents. However, it's still working correctly in FF 3.6 and IE8 (in compatibility mode). To supress these attributes I think you would may have to create a custom control inheriting from TextBox and tweak the render method. Not sure, but you could also try removing these attributes with JS.

A multiline textbox is actually a HTML <textarea> tag:

http://www.w3schools.com/TAGS/tag_textarea.asp

.myTextBox
{
    height: 100px; 
    width: 220px;
}

HTML rendered in IE8 compatibility mode:

<textarea name="TextBox1" rows="2" cols="20" id="TextBox1" class="myTextBox">

I can confirm the the multiline functionality is correct in IE8 compatibility mode.

HTML rendered in Firefox:

<textarea name="TextBox1" rows="2" cols="20" id="TextBox1" class="myTextBox">

Interestingly, the rows and columns are set to "0" in the properties window of VS 2010 yet still appear in the markup, set to "2" and "20", respectively! These links may help you:

http://dotnet.itags.org/webcontrols/95106/

http://forums.asp.net/t/944368.aspx?Removing+Attributes+on+Rendering+WebControllink text

NOTE: If your doctype is XHTML 1.0 Transitional, the rows and cols attributes of a textarea are required. So, you may find that after going to all the trouble of creating a custom control to eliminate these attributes, that the containing page will not validate.