Reduced with of radio button in the page

I would like to reduce the width of the radiobutton list so it won't look wide but by reducing the column width it truncates to next line and doesn't line up.
I don;t need a radiobutton look necessarily wide... I'm using foundation as my framework.  Well thanks for your help.


 <div class="row">

                    <div class="small-4 columns">
                        <div class="panel callout radius">
                            <label>Status of Issue</label>
                          
                            <input type="radio" name="statissue" value="Closed" id="closedid" runat="server"><label for="closedid">Closed</label>--%>

                            <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
                                <asp:ListItem Value="open">Open</asp:ListItem>
                                <asp:ListItem Value="closed">Closed</asp:ListItem>
                            </asp:RadioButtonList>

                        </div>
                    </div>
                    <div class="small-4 columns">
                        <div class="panel callout radius">
                            <label>Priority</label>
                          
                            <input type="radio" name="priority" value="Minor" id="minorid" runat="server"><label for="minorid">Minor</label>--%>
                            <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal">
                                <asp:ListItem Value="critical">Critical</asp:ListItem>
                                <asp:ListItem Value="minor">Minor</asp:ListItem>
                            </asp:RadioButtonList>
                        </div>
                    </div>
                    <div class="small-4 columns">
                        <div class="panel callout radius">
                            
                              <small><asp:DropDownList ID="ddllssues" runat="server" Font-Size="Small"></asp:DropDownList></small>




                        </div>
                    </div>
                </div>

Open in new window

zachvaldezAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
KarenConnect With a Mentor Analyst programmerCommented:
asp:RadioButtonList is rendered as a table  in the html, so the width of the buttons will be affected by your CSS that applies to tables.

<table id="coMain_RadioButtonList1">
    <tbody><tr>
        <td><input id="coMain_RadioButtonList1_0" name="ctl00$coMain$RadioButtonList1" value="open" type="radio"><label for="coMain_RadioButtonList1_0">Open</label></td>
        <td><input id="coMain_RadioButtonList1_1" name="ctl00$coMain$RadioButtonList1" value="closed" type="radio"><label for="coMain_RadioButtonList1_1">Closed</label></td>
    </tr></tbody>
</table>

Open in new window

It is hard to help without knowing your CSS.
You could try adding style="width:auto" to your definitions, i.e.

<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" style="width:auto">

Open in new window

0
All Courses

From novice to tech pro — start learning today.