Solved

Reduced with of radio button in the page

Posted on 2016-10-03
2
71 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 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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
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.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

617 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