I'm having trouble achieving desired layout for radiobuttonlist. I want the output to look like the image below.
Here is a link to what I'm trying to achieve:
http://skitch.com/hiraldesai/fcfn9/radio-button-layout
Here is my code trying to achieve the above, but I am not able to get the text above the radio button programmatically. Is it a CSS thing? I have tried many different combinations of RepeatLayout, RepeatDirection, RepeatColumns, TextAlign, etc.
AnswerRadioButtons.RepeatLayout = RepeatLayout.Table
AnswerRadioButtons.RepeatDirection = RepeatDirection.Horizontal
Thanks for advising.
Changes ("display", "none") to ("visibility", "hidden") to hide it.
To make a horizontal radio button set, add the data-type="horizontal" to the fieldset .
An asp:radiobuttonlist creates a group of radiobuttons that ensures when one is selected, the others are deselected whereas asp:radiobutton is not within a group and therefore cannot be deselected by clicking other radio buttons.
I was able to do it with this test.
<asp:RadioButtonList ID="rbl" runat="server" RepeatDirection="Horizontal"
RepeatLayout="Table" CssClass="RBL" TextAlign="Left">
<asp:ListItem Text="radio button 1" />
<asp:ListItem Text="radio button 1" />
<asp:ListItem Text="radio button 1" />
</asp:RadioButtonList>
With this css
.RBL label
{
display: block;
}
.RBL td
{
text-align: center;
width: 20px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With