Button Width

  1. #1

    Button Width

    I'm having difficulties to change default button width. Using "Width" or "CssClass" properties seems not to be working.

    Code:

        <cool:Button ID="Button1" runat="server" Text="Submit" Type="Submit" CssClass="ext-btn">
        </cool:Button>
    
        <cool:Button ID="Button2" runat="server" Text="Submit" Type="Submit" Width="280">
        </cool:Button>
    CSS class:

        .ext-btn
    
        {
    
            width:280px;
    
        }
    Also tried "Cls" property, same result.
  2. #2

    RE: Button Width

    Hi Vlad,

    The original (ExtJs) don't have width config property but you can use next work-around:

    <head runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
            #<%#Button1.ClientID%>
            {
             width:100px !important;
            }
            
            #<%#Button2.ClientID%>
            {
             width:200px !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <ext:Button runat="server" ID="Button1" Text="1"></ext:Button>
            <ext:Button runat="server" ID="Button2" Text="2"></ext:Button>
        </form>
    </body>
    and don't forget to call Page.Header.DataBind() in this example
    Vladimir Shcheglov
    Sr. Developer
  3. #3

    RE: Button Width

    Hi vladimir

    Thank you for your reply. I just figure out another simple workaround posted below.

     
    <cool:Button ID="Button1" runat="server" Text="<div style='width:100px'>Submit
    " Type="Submit">
    </cool:Button>

    BTW forum admins - I couldn't post this reply in Firefox browser. No editor field.



  4. #4

    RE: Button Width

    The following forum post link to a sample which demonstrates how to align the text and icon to the right.

    See, http://forums.ext.net/showthread.php?postid=540.aspx
    Geoffrey McGill
    Founder & CEO

Similar Threads

  1. [CLOSED] button width IE7
    By nhg_itd in forum 1.x Premium Help
    Replies: 1
    Last Post: Nov 24, 2011, 7:51 AM
  2. Button width
    By dan182 in forum 1.x Help
    Replies: 9
    Last Post: Feb 11, 2011, 10:56 AM
  3. [CLOSED] Button width issue
    By speedstepmem3 in forum 1.x Premium Help
    Replies: 5
    Last Post: Jun 18, 2010, 5:40 PM
  4. Button Width - help!!!
    By Tbaseflug in forum 1.x Help
    Replies: 5
    Last Post: May 05, 2010, 3:52 PM
  5. How to set the button's width?
    By jachnicky in forum 1.x Help
    Replies: 1
    Last Post: Dec 11, 2008, 7:53 AM

Posting Permissions