Radiobuttonlist width in gridview

Question

(https://i.stack.imgur.com/vBDe2.png)

I am using a radiobuttonlist which is getting data on rowDataBound event in a gridview but it is taking up a lot of space when being rendered. I tried using css-width property defining it in an internal css but that didn't help either. I also tried to define width of td but that didn't help either.

Answer 1

Would setting the RB repeat direction to "horizontal" work?

Say this markup:

        <asp:GridView ID="GridView1" runat="server" ShowHeaderWhenEmpty="true"
            AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table table-hover"
            Width="60em">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Province" HeaderText="Province" />
                <asp:BoundField DataField="Description" HeaderText="Description" />
                <asp:TemplateField HeaderText="Room Clean">
                    <ItemTemplate>
                        <asp:RadioButtonList ID="RBYesNo" runat="server"
                            RepeatDirection="Horizontal">
                            <asp:ListItem>Yes</asp:ListItem>
                            <asp:ListItem>No</asp:ListItem>
                        </asp:RadioButtonList>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Code to load:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadGrid
    End If
End Sub


Sub LoadGrid()

    GridView1.DataSource =
        MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName")

    GridView1.DataBind()

End Sub

And results:

And you can always add a bit of style to space out, or do whatever with the RB list.

Say like this:

Or maybe this:

So, I had a old "beat up" to death sytle sheet for above, and it looks like this:

    .rMyChoice h1 {
        color: hsla(215, 5%, 10%, 1);
        margin-bottom: 2rem;
    }

    .rMyChoice section {
        display: flex;
        flex-flow: row wrap;
    }

    section > div {
        flex: 1;
        padding: 0.5rem;
    }

    .rMyChoice input[type=radio], input[type=checkbox] {
        display: none;
        cursor: pointer;
    }


    .rMyChoice label {

        display: block;
        background: white;
        border: 2px solid hsla(150, 5%, 75%, 1);
        border-radius: 25px;
        padding-left: 8px;
        padding-right: 8px;
        text-align: center;
        box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
        position: relative;
        margin-right: 9px;

    }

    .rMyChoice input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
        background: hsla(150, 5%, 75%, 1);
        color: hsla(215, 0%, 100%, 1);
        box-shadow: 0px 0px 20px hsla(150,5%, 75%, 0.75);
    }

    .rMyChoice input[type="radio"]#control_05:checked + label {
        background: red;
        border-color: red;
    }

    .rMyChoice p {
        font-weight: 900;
    }

The above needs some love and care, but lacking time, it is posted "as-is".

So, the above rating list (gridview) markup looked like this:

                <asp:BoundField DataField="Description" HeaderText="Description" />
                <asp:TemplateField HeaderText="Rating">
                    <ItemTemplate>
                        <asp:RadioButtonList ID="RBYesNo" runat="server" CssClass="rMyChoice"
                            RepeatDirection="Horizontal">
                            <asp:ListItem>Poor</asp:ListItem>
                            <asp:ListItem>Fair</asp:ListItem>
                            <asp:ListItem>Good</asp:ListItem>
                            <asp:ListItem>Excellent</asp:ListItem>
                            <asp:ListItem>5&nbsp;star</asp:ListItem>
                        </asp:RadioButtonList>
                    </ItemTemplate>
                </asp:TemplateField>