CODEWITHSUNDEEP
asp.net-mvc-4alignmentradiobuttonfor
meda
meda

Reputation: 45490

Need help aligning radio buttons in MVC

I am having a hard time aligning radio Buttons to the left in MVC 4 template using RadioButtonFor.

For some reason they are placed in the middle, abd it only happens with radio buttons below is a picture:

I have tried to float the div but it did not work .

I also tried to add css class to radio button helper but I got an overload error for the function RadioButtonFor

I even tried to put it into a table

Please advice, here is my code 

<div class="editor-field"  >
<table>
<tr>
    <td>
           @Html.RadioButtonFor(model => model.isChildTakingMedicine, true, new { @onchange = "showTextBox()" }) YES<br />
    </td>
</tr>
<tr><td>
            @Html.RadioButtonFor(model => model.isChildTakingMedicine, false, new { @onchange = "showTextBox()" }) NO
            @Html.ValidationMessageFor(model => model.isChildTakingMedicine)
     </td> 
</tr>
</table>  
</div>

Upvotes: 2

Views: 6480

Answers (3)

Dave
Dave

Reputation: 3301

For some reason it took me longer than expected to arrive at the correct structure for my bootstrap'd situation. I wanted to save others the pain and I hope this layout can help. The data model, in my case, was simply an integer called Status.

    <div class="form-group">
        <label class="col-sm-2">Status</label>
        <div class="col-sm-10">
            <div class="radio-inline"><label>@Html.RadioButtonFor(m => m.Status, 1) Acknowledged </label></div>
            <div class="radio-inline"><label>@Html.RadioButtonFor(m => m.Status, 2) In Progress </label></div>
            <div class="radio-inline"><label>@Html.RadioButtonFor(m => m.Status, 3) Closed/Fixed </label></div>
        </div>
    </div>

Upvotes: 1

Andy
Andy

Reputation: 646

I don't know that this necessarily answers your question, but I thought this may be helpful information for anyone having a similar issue:

I have a table with rows and columns of radio buttons (user is meant to select 1 of the radio buttons in each row). The radio buttons were not lining up with the row or column header texts. Guess what fixed it - adding a border to the table! I tried all sorts of things first, using align and valign, or align within style...that kind of thing. I took all that off and just set "border=1" for the table. Voila - radio buttons are all left aligned with the header text!

Upvotes: 0

meda
meda

Reputation: 45490

It was the width of the radio button to wide, the default css gives a large width to all input tag.

Added the following CSS to fix it:

input[type="radio"]  
{
       width: 20px;   
}

Upvotes: 6

Related Questions