I'm currently using VB.Net MVC, Razor, Bootstrap, and Visual Studio 2013. My clients have requested that the dropdowns match the width of the text boxes.
Here is how I create my dropdowns:
@<div class="row">
<div class="col-md-4">
<label>@Model.ListOfFields(i): </label>
</div>
<div class="col-md-8">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle btn-sm" type="button"
id="@Model.ListOfFields(i)" data-toggle="dropdown"
aria-expanded="true">
<span class="search" id="@Model.ListOfCategoryAttributeIDs(i)" ></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labeledby="@Model.ListOfFields(i)">
@For x As Integer = 0 To Model.ListOfDropDowns.Count - 1
Dim currentField As String = Model.ListOfFields(i)
Dim currentObject As CivilServiceInventoryMock.ViewModels.customDropDown = Model.ListOfDropDowns(x)
If (currentObject.fieldType).Equals(currentField) Then
Dim currentOption As String = currentObject.dropDownValue
@<li role="presentation">
<a id="ddListSelectItemType" class="ddListSelectItemType"
onclick="lockValue(this)" role="menuitem"
tabindex="-1">
<div class="itemOptions" id="@Model.ListOfCategoryAttributeIDs(i)">
@Html.DisplayFor(Function(modelItem) currentOption)
</div>
</a>
</li>
End If
Next
</ul>
</div>
</div>
</div>
This is how I create a text box:
@For i As Integer = 0 To Model.ListOfDisplayTypes.Count - 1
If Model.ListOfDisplayTypes(i).Equals("TextBox") Then
@<div class="row">
<div class="col-md-4">
<b>@Model.ListOfFields(i): </b>
</div>
<div class="col-md-4">
<input class="search" id="@Model.ListOfCategoryAttributeIDs(i)"
name="@Model.ListOfFields(i)" type="text" placeholder="@Model.ListOfFields(i)" />
</div>
</div>
End If
Next
I've tried different CSS combinations to make the dropdowns and text boxes match in width without success. Could there be a specific combination of column size and width percentage to achieve this?