Solved

ASP.net Stretch button an extra bit

Posted on 2014-03-01
2
386 Views
Last Modified: 2014-03-01
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?
0
Comment
Question by:murbro
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:murbro
Comment Utility
Thanks very much
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now