CODEWITHSUNDEEP
htmlasp.net-mvc-3
Leron
Leron

Reputation: 9886

Styling DropDownList in ASP.NET MVC 3 view

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

Upvotes: 0

Views: 428

Answers (2)

Klors
Klors

Reputation: 2674

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;
}

Upvotes: 1

von v.
von v.

Reputation: 17118

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;
}

Upvotes: 0

Related Questions