CODEWITHSUNDEEP
asp.net.netvb.net
Gamonki
Gamonki

Reputation: 21

Set padding for Textbox control in ASP.NET

I needed to set the padding for text box controls in my ASP.NET web forms application because the were rendering inconsistently with Dropdownlist controls on the browser. The Dropdownlists had some padding between the text and the border and the Textboxes did not have any.

Visual Studio does not provide a direct padding property for controls so trying to set/change padding for controls like Textboxes and Dropdownlists can be very frustrating. After a lot of searching without any getting any useful solutions i was able to do it. See Answer below.

Upvotes: 1

Views: 10893

Answers (2)

a1771550
a1771550

Reputation: 41

I strongly recommended you learn some CSS, so that you would not depend solely on the web controls provided by visual studio. As in your case, just put "cssclass='somestyle'" into your textbox control and that is:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .padding {
            padding:.5em;
        }
    </style>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox runat="server" ID="txtDemo" CssClass="padding"></asp:TextBox>
    </div>
    </form>
</body>
</html>

Upvotes: 4

Gamonki
Gamonki

Reputation: 21

The answer lies in the CssClass Attribute of the control which go like Auto-Style1, Auto-Style2, etc.

If you have Dreamweaver installed you can open your .aspx web-form and select and edit the the CssClass Rules. (Select the Css tab on the properties tab below the page in Dreamweaver) Here you can set padding Rule (See 'Box option' in the Css Rule Definions - Uncheck 'Same for all' to set different Left, Top, Bottom, Right padding values) Save and the go back to Visual studio load the saved page and set that CssClass property of the control to the edited CssClass. (Do not set the CssClass for the control in Dreamweaver - you are likely to get errors when you run your application) I only edited the padding rule so i do not know the effect of editing other CssClass rules.

It Worked! I have 5px padding for my Textboxes and they are now consistent with Dropdownlist padding (Chrome browser). They look lovely!

Hope this helps Someone.

Screen Shot Dreamweaver and Visual Studio

Upvotes: 0

Related Questions