Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Reduced with of radio button in the page

Posted on 2016-10-03
2
Medium Priority
?
78 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 9

Accepted Solution

by:
Karen earned 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

719 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