• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 90
  • Last Modified:

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

0
zachvaldez
Asked:
zachvaldez
1 Solution
 
KarenAnalyst 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now