Use the following method to make your RadioButtonList
look and work like a normal HTML tab control. This is useful when you're working on .NET 2.0 apps, and aren't allowed to use AJAX.
Put the following CSS into your CSS file:
.radiobuttonlist
{
font: 12px Verdana, sans-serif;
color: #000;
}
.radiobuttonlist input
{
width: 0px;
height: 0px;
}
.radiobuttonlist label
{
color: #3E3928;
background-color:#E8E5D4;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #AAAAAA;
margin: 0px 0px 0px 0px;
white-space: nowrap;
clear: left;
margin-right: 5px;
}
.radiobuttonlist span.selectedradio label
{
background-color: #F7F5E8;
color: #000000;
font-weight: bold;
border-bottom-color: #F3F2E7;
padding-top:4px;
}
.radiobuttonlist label:hover
{
color: #CC3300;
background: #D1CFC2;
}
.radiobuttoncontainer
{
position:relative;
z-index:1;
}
.radiobuttonbackground
{
position:relative;
z-index:0;
border: solid 1px #AcA899;
padding: 10px;
background-color:#F3F2E7;
}
Set the CssClass
of your RadioButtonList
to "radiobuttonlist", set the "RepeatLayout
" to "Flow
", and enclose it in a DIV, like this:
<div class="radiobuttoncontainer">
<asp:RadioButtonList ID="optTabs" runat="server" AutoPostBack="true" RepeatDirection="Horizontal"
RepeatLayout="Flow" CssClass="radiobuttonlist">
<asp:ListItem runat="server" Text="Locations" Value="LocationInformation_Manage"></asp:ListItem>
<asp:ListItem Text="Address" Value="Address_Manage"></asp:ListItem>
<asp:ListItem Text="Contacts" Value="Contacts_Manage"></asp:ListItem>
<asp:ListItem Text="Comments" Value="CommentsList_Manage"></asp:ListItem>
<asp:ListItem Text="Conveyances" Value="ConveyanceList_Manage"></asp:ListItem>
<asp:ListItem Text="Permits" Value="PermitList_Manage"></asp:ListItem>
<asp:ListItem Text="Invoices" Value="TransactionList_Manage"></asp:ListItem>
<asp:ListItem Text="Analyze Invoices" Value="Annual_Invoice_Analysis_View"></asp:ListItem>
</asp:RadioButtonList>
</div>
<div class="radiobuttonbackground">
<asp:PlaceHolder ID="phEntity" runat="server"></asp:PlaceHolder>
</div>
On Page_Load
in the code-behind, add the following line:
optTabs.SelectedItem.Attributes.Add("class", "selectedradio")