RadioButtonList rendered as <ul>

When you use RadioButtonList control in your Sitefinity website the button lists are always rendered as <ul> and setting the ReperatDirection="Horizontal" property of the RadioButtonList control does not take effect. This is because we use a custom control adapter fro rendering the control in Sitefinity.

In order to make the RadioButtonList control render the buttons horizontally you have two options: either remove the control adapter or provide custom styles for the RadioButtonList. The first option is not recommendable because removing the control adapter will break the appearance of RadioButton controls in the Sitefnity back-end. This can be done by removing the bellow line from ~/App_Browsers/BrowserFile.browser file:

        <controlAdapters>  
       ...  
       <adapter controlType="System.Web.UI.WebControls.RadioButtonList" adapterType="Telerik.Cms.Web.UI.Adapters.RadioButtonListAdapter" />  
     </controlAdapters>  
  

The preferred approach is to provide CSS rules in order to render the radio button lists on the same line. First set the CssClass property of the RadioButtonList control:

        <asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="ButtonList">  
         ...  
     </asp:RadioButtonList>  
  

Then use the bellow sample CSS rules to achieve the desired result:

    .ButtonList  
 {  
     list-style-type:none;  
     width: 100%;  
     float: left;  
     clear: both;  
 }  
 .ButtonList li  
 {  
     float: left;  
 }  
   
  