Mindless Philosophy






Styling a Multiple RadioButtonList

by Darren Street

Created on: Thursday November 7, 2013

1 comments

I needed to show a list of ASP.NET Radio Buttons in a list without the associated values showing. So the first thing I did was do a Google search, but couldn't find a good solution. Anyway an hour later I figured it so I thought I’d share.

RadioButtonList

First the HTML markup



<asp:RadioButtonList ID="RBL" runat="server" 
                        RepeatDirection="Horizontal" CausesValidation="True" >                               
  <asp:ListItem Text="1">1</asp:ListItem>  
  <asp:ListItem Text="2">2</asp:ListItem>   
  <asp:ListItem Text="3">3</asp:ListItem>     
  <asp:ListItem Text="4">4</asp:ListItem>    
  <asp:ListItem Text="5">5</asp:ListItem>    
  <asp:ListItem Text="6">6</asp:ListItem>   
  <asp:ListItem Text="7">7</asp:ListItem>  
</asp:RadioButtonList>



There is a problem with this because the values are also shown…which I don’t want.
So I added a span class inline.

  

<asp:RadioButtonList ID="RBL" runat="server" RepeatDirection="Horizontal" CausesValidation="True">                               
 <asp:ListItem Text="1"><span class="listitemIndent">1</span></asp:ListItem>  
 <asp:ListItem Text="2"><span class="listitemIndent">2</span></asp:ListItem>   
 <asp:ListItem Text="3"><span class="listitemIndent">3</span></asp:ListItem>    
 <asp:ListItem Text="4"><span class="listitemIndent">4</span></asp:ListItem>   
 <asp:ListItem Text="5"><span class="listitemIndent">5</span></asp:ListItem>   
 <asp:ListItem Text="6"><span class="listitemIndent">6</span></asp:ListItem>  
 <asp:ListItem Text="7"><span class="listitemIndent">7</span></asp:ListItem>  
</asp:RadioButtonList>

And the following CSS...

 

.listitemIndent {margin-left:-1000px;}

This has the effect of displaying the value off the left of the screen never to be shown (or forcing a scrollbar)
Happy coding.

1 comments




Richard Niame commented on 16 Nov 2013


Nice and simple, thanks for sharing.



Have your say


Sorry this post is no longer accepting comments.