Tuesday, September 14, 2010

Silly Radiobuttonlist of asp.net

I added a asp:radiobuttonlist to a page and took me a while to get it to look just right...

ASP.NET provides you with a lot of options for tweaking and setting the properties for radiobuttonlist

Here is some nice info I found:

The Layout properties of RadioButtonList control include the following 3 properties:
RepeatColumns: It accepts the integer value that renders the layout of the radiobuttonlist control with specified number of columns. 0 is the default value of RepeatColumns property that renders the list items as a single vertical list of radio button items.
RepeatDirection: It allows you to set the rendering direction of list items of the radiobuttonlist control. RepeatDirection property accepts one of the following predefined values:
1. Horizontal: this value renders the list items in left to right manner. Each item renders at the right side of the previous until it reaches the specified number of RepeatColumns property value. Then it renders the next item in new line or row of the table based on the RepeatLayout property value.
2. Vertical: this value renders the list items in top to bottom manner. Each items renders below the previous item in a new row cell each time. It applies some logic to render the vertical layout of the radiobuttonlist items.
RepeatLayout: It enables you to specify the layout type of the radiobuttonlist control. You can specify the RepeatLayout property using any one of the following predefined keywords:
1. Table: It renders the list items using HTML table element. It generates the table cells and rows to display the radiobuttonlist items using table layout.
2. Flow: It renders the list items using HTML span element as a container and it uses the HTML
tag to enter the line break between the radio button list items to generate new rows.
"Table" is the default value of RepeatLayout property.
Following is a list of CSS based properties of the ASP.Net RadioButtonList control that can be used to customize its look and feel:
BackColor: allows you to set the background color.
BorderColor: allows you to set the border color.
BorderStyle: allows you to set the predefined style of the border around the radiobuttonlist. You can specify the border styles such as solid, dotted, dashed etc.
BorderWidth: allows you to set the width of the border using CSS units such as px, pt, cm etc.
CellPadding: It sets the cell padding for the table cells of the radiobuttonlist control when rendered with RepeatLayout property as "Table".
CellSpacing: It sets the cell spacing for the table cells of the radiobuttonlist control when rendered with RepeatLayout property as "Table".
CssClass: allows you to specify the name of the CSS class to customize the look and feel of radiobuttonlist control.
Font Style Properties: the font style properties of radiobuttonlist include font-size, family, bold, italics etc.
ForeColor: Sets the color of the text content of the listitems
TextAlign: It enables you to set the horizontal alignment of the text aligned to left or right direction.

1 comment:

Pat L said...

THANK YOU! I seriously spent 1.5 hours on Google searching for ways to style the damn RadioButtonList and your posting here has help solved my problem!! Gracias!