Wednesday, November 19, 2008

Turning an ASP.NET Panel into a Fieldset

I found out a while back that you can make a panel a fieldset simply by setting the value of the Grouping text attribute. This proved to be really useful as although I use Multiview for navigating a page I always found myself adding panels inside views as I needed to set the default button attribute. See Below;

<asp:Panel ID="pl_login" runat="server" DefaultButton="btn_login" GroupingText="Returning Customers, Enter your Email Address and Password ">
<table class="form_table" width="400">
<td>&nbsp;<asp:TextBox ID="tb_login_email" runat="server" CssClass="textbox_wider"></asp:TextBox></td>
<td>&nbsp;<asp:TextBox ID="tb_login_password" runat="server" TextMode="Password"></asp:TextBox></td>
<td align="left">&nbsp;<asp:Button ID="btn_login" runat="server" CommandName="login" OnCommand="loginAction"
Text="Login" /></td>
Not yet signed up -
<asp:LinkButton ID="lb_sign_up" runat="server" CommandName="signup" OnCommand="loginAction">Click here</asp:LinkButton></td>
I didn't embrace it 100% as the width of fieldset kept defaulting to 100%. I didn't want to set a specific width as I was if you did and the content exceeded that width it went outside the fieldset. Anyhow I tweaked the css of the fieldset so that the width would default to width of the content inside (display:inline). If you must set a width - use the min-width style;

form fieldset
top: 5px;
border: solid 1px #A8A8A8;
margin: 20px 0px 20px 0px;
display:inline; /* fieldset fits content */
padding: 0px 10px 10px 10px;
min-width: 550px;

form fieldset legend

background-color: #56458C;
padding: 0px 8px 2px 8px;
margin: 2px 0px 10px 0px;
top: -10px;

.form_table th {
width: 120px;
text-align: right;

No comments: