CODEWITHSUNDEEP
asp.netfontstextbox
GLP
GLP

Reputation: 3685

The default font for Multiline Textbox is different from singleline Textbox?

I have couple of Textbox controls in my page. Some are multilines and others are singleline. I notice the default fonts between multilines and singleline Textboxes are different. Anybody knows why? How do I make them the same font? Thanks.

Here is the sample:

   <asp:TextBox ID="TextBox1" runat="server">hello</asp:TextBox>
   <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine">hello</asp:TextBox>

The font for TextBox1 is MS Shell Dlg, the font for TextBox2 is monospace.

Upvotes: 5

Views: 20215

Answers (3)

Tim M.
Tim M.

Reputation: 54387

Style Selector for CSS

<style type="text/css" media="screen">

    /* match all single/multiline textboxes (IE 7+ for the attribute selector) */
    TEXTAREA, INPUT[type="text"]
    {
        /* font size, line height, face */
        font: 11px/1.5 "Trebuchet MS", Arial, Verdana, sans-serif;

        /* useful for supporting 100% width inclusive of padding and border */
        box-sizing: border-box; 
    }

</style>

Note that the media attribute is not required but the behavior of input fields can vary widely depending on the rendering target (e.g. printer versus screen). For screen media, the style should encourage input; for print, the style may be different since a printed page is (obviously) not editable.

As to "why" the default fonts are different, TEXTAREAs were historically sized using columns and rows. A fixed-width font (like monospace) makes it possible to control the number of characters in a row, which is probably why most browsers use a fixed-width font for the TEXTAREA by default.

Assigning a CSS Class via a Theme (ASP.NET only)

In your theme file, add an entry in the following manner:

<asp:TextBox runat="server" CssClass="myClassName"></asp:TextBox>

This will apply the class "myClassName" to all textboxes to which the theme applies.

Upvotes: 8

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

Set a font style to it: CSS:

<style type="text/css">
    .text
    {
        font-family:Verdana;
        font-weight:bold;
    }
</style>

HTML:

<asp:TextBox  CssClass="text" ID="TextBox1" runat="server" Height="196px" TextMode="MultiLine" 
    Width="271px"></asp:TextBox>

Good luck!

Upvotes: 1

George Johnston
George Johnston

Reputation: 32278

If you're using a style sheet, you'll need to ensure that you don't have a specific font set to your text area that differs from your single line text box. It would look similar to the following,

text area
{
   font-size:10px;
}

Upvotes: 0

Related Questions