Solved

ASP.net Stretch button an extra bit

Posted on 2014-03-01
2
397 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
ID: 39897356
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
ID: 39897714
Thanks very much
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

733 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