How do I add space between items in an ASP NET RadioButtonList

Question

I ve got an ASP NET RadioButtonList that displays four items using RepeatDirection  Horizontal  to display them on a single line   I m using RepeatLayout  Flow  to avoid the markup for a table   However  this causes the items in the list to be placed right next to each other  which does not look good   So  I tried the table layout to take advantage of the CellSpacing and or CellPadding properties   Unfortunately  these properties affect both the vertical and horizontal spacing padding within the table  so while I get the horizontal spacing  I also get undesired vertical spacing   At this point  I m down to this    lt asp RadioButtonList ID  rblMyRadioButtonList  runat  server       RepeatDirection  Horizontal      RepeatLayout  Flow   gt       lt asp ListItem Selected  false  Text  Item One amp nbsp  amp nbsp  amp nbsp  amp nbsp   Value  Item 1    gt       lt asp ListItem Selected  false  Text  Item Two amp nbsp  amp nbsp  amp nbsp  amp nbsp   Value  Item 2    gt       lt asp ListItem Selected  false  Text  Item Three amp nbsp  amp nbsp  amp nbsp  amp nbsp   Value  Item 3    gt       lt asp ListItem Selected  false  Text  Item Four amp nbsp  amp nbsp  amp nbsp  amp nbsp   Value  Item 4    gt   lt  asp RadioButtonList gt       which screams at me  You re not doing it right    What is the right way to accomplish this

User · Answer

I know this is an old question but I did it like:

<asp:RadioButtonList runat="server" ID="myrbl" RepeatDirection="Horizontal" CssClass="rbl">

Use this as your class:

.rbl input[type="radio"]
{
   margin-left: 10px;
   margin-right: 1px;
}

User · Answer

Use css to add a right margin to those particular elements   Generally I would build the control  then run it to see what the resulting html structure is like  then make the css alter just those elements   Preferably you do this by setting the class   Add the CssClass  myrblclass  attribute to your list declaration   You can also add attributes to the items programmatically  which will come out the other side   rblMyRadioButtonList Items x  Attributes CssStyle Add  margin-right 5px      This may be better for you since you can add that attribute for all but the last one

User · Answer

you can also use cellspacing and cellpadding properties if repeat layout is table         lt asp RadioButtonList ID  rblMyRadioButtonList  runat  server  CellPadding  3  CellSpacing  2  gt

User · Answer

Even though  the best approach for this situation is set custom CSS styles - an alternative could be   Use Width property and set the percentaje as you see more suitable for your purposes   In my desired scenario  I need set  2  radiobuttons items as follows            o Item 1 o Item 2     Example   lt asp RadioButtonList ID  quot rbtnLstOptionsGenerateCertif quot  runat  quot server quot       BackColor  quot Transparent quot  BorderColor  quot Transparent quot  RepeatDirection  quot Horizontal quot       EnableTheming  quot False quot  Width  quot 40  quot  gt       lt asp ListItem Text  quot Item 1 quot  Value  quot 0 quot    gt       lt asp ListItem Text  quot Item 2 quot  Value  quot 1 quot    gt   lt  asp RadioButtonList gt   Rendered result   x000D   x000D   lt table id  ctl00 ContentPlaceHolder rbtnLstOptionsGenerateCertif  class  chxbx2  border  0  style  background-color Transparent border-color Transparent width 40    gt     lt tbody gt       lt tr gt         lt td gt           lt input id  ctl00 ContentPlaceHolder rbtnLstOptionsGenerateCertif 0  type  radio  name  ctl00 ContentPlaceHolder rbtnLstOptionsGenerateCertif  value  0  checked  checked  gt           lt label for  ctl00 ContentPlaceHolder rbtnLstOptionsGenerateCertif 0  gt Item 1 lt  label gt         lt  td gt         lt td gt           lt input id  ctl00 ContentPlaceHolder rbtnLstOptionsGenerateCertif 1  type  radio  name  ctl00 ContentPlaceHolder rbtnLstOptionsGenerateCertif  value  1  gt           lt label for  ctl00 ContentPlaceHolder rbtnLstOptionsGenerateCertif 1  gt Item 2 lt  label gt         lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt  x000D   x000D   x000D

User · Answer

lt asp RadioButtonList ID  rbn  runat  server  RepeatLayout  Table  RepeatColumns  2                          Width  100    gt                           lt asp ListItem Text  1  gt  lt  asp ListItem gt                           lt asp ListItem Text  2  gt  lt  asp ListItem gt                           lt asp ListItem Text  3  gt  lt  asp ListItem gt                           lt asp ListItem Text  4  gt  lt  asp ListItem gt                       lt  asp RadioButtonList gt

User · Answer

Even easier     ASP NET   lt asp RadioButtonList runat  server  ID  MyRadioButtonList  RepeatDirection  Horizontal  CssClass  FormatRadioButtonList  gt        CSS   FormatRadioButtonList label     margin-right  15px

[asp.net] How do I add space between items in an ASP.NET RadioButtonList

Examples related to asp.net

Examples related to formatting

Examples related to markup

Examples related to radiobuttonlist