Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

ASP.net Stretch button an extra bit

Posted on 2014-03-01
2
Medium Priority
?
405 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:Murray Brown
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 2000 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:Murray Brown
ID: 39897714
Thanks very much
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

636 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