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">
<tr><th>Email:</th>
<td>&nbsp;<asp:TextBox ID="tb_login_email" runat="server" CssClass="textbox_wider"></asp:TextBox></td>
</tr>
<tr><th>Password:</th>
<td>&nbsp;<asp:TextBox ID="tb_login_password" runat="server" TextMode="Password"></asp:TextBox></td>
</tr>
<tr><th></th>
<td align="left">&nbsp;<asp:Button ID="btn_login" runat="server" CommandName="login" OnCommand="loginAction"
Text="Login" /></td>
</tr>
<tr><th></th>
<td>
Not yet signed up -
<asp:LinkButton ID="lb_sign_up" runat="server" CommandName="signup" OnCommand="loginAction">Click here</asp:LinkButton></td>
</tr>
</table>
</asp:Panel>
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;
background-color:#FCFCFC;
margin: 20px 0px 20px 0px;
position:relative;
display:inline; /* fieldset fits content */
padding: 0px 10px 10px 10px;
min-width: 550px;
}

form fieldset legend
{

font-size:12px;
background-color: #56458C;
color:#FCFCFC;
font-weight:bold;
font-variant:small-caps;
padding: 0px 8px 2px 8px;
margin: 2px 0px 10px 0px;
position:relative;
top: -10px;
}

.form_table th {
width: 120px;
text-align: right;
font-weight:bold;
}

No comments: