RadioButtonList Item Css Margin
RadioButtonList is an asp.net list web server control that render a single selection radio button group
in web browser. the following asp.net c# example source code demonstrate us how can we apply margin in a radiobuttonlist
control. actually in this example code we will apply margin css style to a radiobuttonlist's each item.
RadioButtonList web server control have no built in property to set margin in radiobuttonlist control or each item in radiobuttonlist. so we need to take help from css style. radiobuttonlist items collection contains ListItem objects. we can attach any css style to a ListItem object using Attributes property as Attributes.CssStyle.Add(). this Add() method allow us to attach any css style by name value pair to a ListItem object.
In this example we iterate through the radiobuttonlist items collection using foreach loop and attach a margin css style to its each item. here we applied 25 pixel left and right margin for each item in a radiobuttonlist server control. in this way we can assign different margin value for different item in a radiobuttonlist. event we can apply margin for any specific item in a radiobuttonlist.
RadioButtonList web server control have no built in property to set margin in radiobuttonlist control or each item in radiobuttonlist. so we need to take help from css style. radiobuttonlist items collection contains ListItem objects. we can attach any css style to a ListItem object using Attributes property as Attributes.CssStyle.Add(). this Add() method allow us to attach any css style by name value pair to a ListItem object.
In this example we iterate through the radiobuttonlist items collection using foreach loop and attach a margin css style to its each item. here we applied 25 pixel left and right margin for each item in a radiobuttonlist server control. in this way we can assign different margin value for different item in a radiobuttonlist. event we can apply margin for any specific item in a radiobuttonlist.
radiobuttonlist-margin.aspx
<%@ Page Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
RadioButtonList1.Items.Add(new ListItem("California Gnatcatcher", "1"));
RadioButtonList1.Items.Add(new ListItem("Black-tailed Gnatcatcher", "2"));
RadioButtonList1.Items.Add(new ListItem("White-lored Gnatcatcher", "3"));
RadioButtonList1.Items.Add(new ListItem("Brown Creeper", "4"));
RadioButtonList1.Items.Add(new ListItem("Eurasian Treecreeper", "5"));
}
foreach(ListItem li in RadioButtonList1.Items)
{
//add margin as css style
li.Attributes.CssStyle.Add("margin-left", "25px");
li.Attributes.CssStyle.Add("margin-right", "25px");
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>asp.net radiobuttonlist margin</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:MidnightBlue; font-style:italic;">
asp.net example - radiobuttonlist margin
</h2>
<hr width="550" align="left" color="Gainsboro" />
<asp:Label
ID="Label1"
runat="server"
Font-Size="Large"
Width="350"
Text="select an item from radiobuttonlist"
>
</asp:Label>
<br /><br />
<asp:RadioButtonList
ID="RadioButtonList1"
runat="server"
RepeatDirection="Vertical"
AutoPostBack="true"
RepeatLayout="Flow"
BorderColor="SkyBlue"
BorderWidth="1"
>
</asp:RadioButtonList>
</div>
</form>
</body>
</html>

- How to trim text with ellipsis in a Label
- How to display an image in a Label
- How to get selected value from RadioButtonList
- How to create a horizontal layout RadioButtonList
- How to check that RadioButtonList has a selected item
- How to set a default selected item in RadioButtonList
- How to perform foreach loop through RadioButtonList items
- How to add different tooltip for RadioButtonList items
- How to set RadioButtonList items vertical alignment
- How to add vertical space between items in a RadioButtonList