PDA

View Full Version : Button Width



Vlad
Apr 04, 2008, 1:48 PM
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.

Vladimir
Apr 04, 2008, 5:04 PM
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

Vlad
Apr 05, 2008, 3:51 AM
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.

geoffrey.mcgill
Jun 09, 2008, 7:42 PM
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