ASP.net Stretch button an extra bit

Hi

I have buttons on my ASP.net site, whose text values are assigned on page load.
I haven't set the height and width properties so that they stretch automatically to fit the text.
I would like them to stretch a bit further than they do. Is it possible to do this?
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
I think what you're looking for is left and right padding in CSS.

When I add a button to a page, it's rendered as <input type="submit" ...> which is what you can target with CSS.

You will usually not want to target all buttons, maybe every button in a certain div which is what I show below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> EE Q_28377703 </title>
    <style type="text/css">
        div.new input[type=submit]
        {
            background-color: lightblue;
            padding-left: 50px;
            padding-right: 50px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Narrow" />
        <asp:Button ID="Button2" runat="server" Text="Really Really Wide" />
    </div>
    <div class="new">
        <asp:Button ID="Button3" runat="server" Text="Narrow" />
        <asp:Button ID="Button4" runat="server" Text="Really Really Wide" />
    </div>
    </form>
</body>
</html>

Open in new window

capture
If you do want all buttons to be targeted, just leave out "div.new" on line 5.

If it doesn't work or you need help targeting the right buttons, please post the generated code from your page (use 'view source' in the browser).

Another option would be to use the CssClass attribute on your buttons specifying a certain class and use that in your CSS.
    <style type="text/css">
        .MyClass
        {
            background-color: lightblue;
            padding-left: 50px;
            padding-right: 50px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Narrow" CssClass="MyClass" />
        <asp:Button ID="Button2" runat="server" Text="Really Really Wide" CssClass="MyClass" />
    </div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks very much
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.