htmlasp.net-mvcdrop-down-menuhtml-selectdropdownlistfor

Mvc DropdownList Not working

Issue Description:

Dropdownlist after selection not showing the selected text from list.

enter image description here

Here I am using MVC Razor syntax to generate dropdownlist box.

  <div class="form-group">
            @Html.LabelFor(m => m.Genre)
            @Html.DropDownListFor(m => m.Genre, 
                                  new SelectList(Model.Genres, "Id", "Name"),
                                  "---Select---", new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Genre)
    </div>

The list is correctly populating but after selecting the option it's not showing in the dropdownlist box.

Note: when I submit the form the correct selected value is sent to action.

Steps checked:

  1. Checked the generated HTML it looks ok..

enter image description here

  1. It uses bootstrap form-control class and the color set is Black. Also rest of the field values are displayed which are inside same form.

  2. Browser computed tab enter image description here

Thanks in Advance..

update Solution:

I have defined some override for my form-control class for text spacing which caused the problem. I was thinking color was issue, but actually issue was with my text padding.

.form-control {
    font-size: 17px;
    /*padding: 20px 15px;*/  /*this statement caused issue*/
    border-radius: 9px; 
    height:42px; /* I replaced with padding to height which solved issue.*/
}
Solution

  • I have defined some override for my form-control class for text spacing which caused the problem. I was thinking color was issue, but actually issue was with my text padding.

    .form-control {
    font-size: 17px;
    /*padding: 20px 15px;*/  /*this statement caused issue*/
    border-radius: 9px; 
    height:42px; /* I replaced with padding to height which solved issue.*/
}