Styling DropDownList in ASP.NET MVC 3 view

Question

I have three DropDownLists in my view. The code I use to visualize them is this:

@{
    var listItems = new List<SelectListItem>();
    listItems.Add(new SelectListItem { Text = String.Empty, Value = String.Empty });
    foreach (var name in ViewBag.Names)
    {
        listItems.Add(new SelectListItem { Text = name, Value = name });
    }
}
    <span>
        Repair Form : @Html.DropDownList("dropDownList", listItems)
    </span>
    //code...
    <span>
        Tools : @Html.DropDownList("kkcDropDownList", kkcItems)  
    </span>
    //code...
    <span>
        Document : @Html.DropDownList("docDropDownList", docItems)
    </span>
    //code...

And I get this as result :

ComboAsItIs

What I want to change is the order of appearance - now it's text-dropDown, text-dropDown.. Insted I want to be text and below the text the dropDown like this:

ComboAsIWantIt

Klors · Accepted Answer · 2013-04-22 11:24:17Z

1

Depending on how you want the 3 groupings to align, I'd have two different suggestions.

If you want

text
dropdown

text
dropdown

text
dropdown

then you could simply add in the relevant <br/> tags after the text and after the dropdown code.

If you want

text       text       text
dropdown   dropdown   dropdown

then you'll need to add a css rule to give your spans a display: inline-block; and a relevant width to force the dropdown to wrap appropriately.

span
{
    display: inline-block;
    width: 150px;
}

But, that will style all of your spans, so give your spans a class and then use that in the CSS definition.

<span class="aclass">
    Text: dropdown
</span>

span.aclass
{
    display: inline-block;
    width: 150px;
}

edited Apr 22, 2013 at 11:24

answered Apr 22, 2013 at 11:16

Klors

2,6642 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Leron Over a year ago

I need the second option. Is it possible to share a CSS example code?

Klors Over a year ago

I'll see if I can create an example for you

Klors Over a year ago

And here is an example without needing the extra <br/> markup. jsfiddle.net/Klors/KVzxu/1

von v. · Accepted Answer · 2013-04-22 11:13:44Z

0

You can put the label inside another element and define and assign a class to it, displaying it as a block.

Option #1

<span>
    <span class="list-label">Repair Form</span> : 
        @Html.DropDownList("dropDownList", listItems)
</span>
// css
span.list-label {
    display: block;
}

Option #2 Treat all labels as a block. If you use this with a textbox the label will be on top of the the input field.

<span>
    <label>Repair Form</label> : 
        @Html.DropDownList("dropDownList", listItems)
</span>
// css
label {
    display: block;
}

answered Apr 22, 2013 at 11:13

von v.

17.1k5 gold badges62 silver badges89 bronze badges

Collectives™ on Stack Overflow

Styling DropDownList in ASP.NET MVC 3 view

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related