Solved

Reduced with of radio button in the page

Posted on 2016-10-03
2
46 Views
Last Modified: 2016-10-05
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
Comment
Question by:zachvaldez
2 Comments
 
LVL 9

Accepted Solution

by:
Karen earned 500 total points
ID: 41829012
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now