MVC Radio Button Design Options

Question

I am creating an MVC mobile application. One of my screens contains radio buttons for a user to select the length of their hair, their eye colour and etc. The current styling is incredibly bulky, with each item taking up a whole row.

What other styling options do I have at my disposal? Here is a screenshot so you can see how much room it's taking up. https://i.sstatic.net/KBifo.png

The following is some exerts of code for @danm

This is Views/PersonalDetails/Edit.cshtml.

    <fieldset>
        <legend>Hair Length</legend>
        @Html.RadioButtonFor(e => e.HairLength, 0, new { id = "hair-short" })
        @Html.Label("hair-short", "Short")
        @Html.RadioButtonFor(e => e.HairLength, 1, new { id = "hair-medium" })
        @Html.Label("hair-medium", "Medium")
        @Html.RadioButtonFor(e => e.HairLength, 2, new { id = "hair-long" })
        @Html.Label("hair-long", "Long")
    </fieldset> 

This is site.cs

.field-validation-error {
color: #f00;
display: block;
margin-top: 8px;
text-align: center;
}

.field-validation-valid {
display: none;
}

.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}

.validation-summary-errors {
font-weight: bold;
color: #f00;
}

.validation-summary-valid {
display: none;
}

.input input {
float: left;
}
.input label {
margin: 0px, 0px, 5px, 5px;
}

/* jQuery mobile styles
-----------------------------------------------------------*/

/* Make listview buttons fill the whole horizontal width of the screen */
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
padding-right: 15px;
}

.ui-bar-a, .ui-body-a, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a,
.ui-bar-b, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b,
.ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c,
.ui-bar-d, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d,
.ui-bar-e, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e,
.ui-btn-active  {
text-shadow: none;
}

Answer 1

It seems like the word lengths are short enough that you could have two columns of radio buttons rather than one.

I think this is a better solution than simply shrinking your radio buttons, because you want to keep your targets large enough for human fingers to easily press.

Example:

Edit

Here is some (untested) code to get you started...

Markup:

<fieldset>
    <div id="column-1">
        <legend>Hair Length</legend>
        @Html.RadioButtonFor(e => e.HairLength, 0, new { id = "hair-short" })
        @Html.Label("hair-short", "Short")
        @Html.RadioButtonFor(e => e.HairLength, 1, new { id = "hair-medium" })
        @Html.Label("hair-medium", "Medium")
        @Html.RadioButtonFor(e => e.HairLength, 2, new { id = "hair-long" })
        @Html.Label("hair-long", "Long")
    </div>
    <div id="column-2">
        <legend>Eye Colour</legend>
        @Html.RadioButtonFor(e => e.EyeColour, 0, new { id = "eyes-blue" })
        @Html.Label("eyes-blue", "Blue")
        @Html.RadioButtonFor(e => e.EyeColour, 1, new { id = "eyes-brown" })
        @Html.Label("eyes-brown", "Brown")
        @Html.RadioButtonFor(e => e.EyeColour, 2, new { id = "eyes-gray" })
        @Html.Label("eyes-gray", "Gray")
    </div>
</fieldset>  

CSS:

#column-1
{
    float:left;
    width:50%;
}

#column-2
{
    float:left;
    width:50%;
}

You will probably want to add some margins and/or padding to create some spacing between the columns and to improve aesthetics, but hopefully this gives you enough to work with.