title: Dynamically resize the width of the DropDownListFor only - MVC
body: <p>I am trying to have the DropDownListFor of each form group to dynamically resize. The first DropDownList always contains more characters than the other two. I am trying to get the other two to match the size of the first DropDownList.</p>
  <p>Below is the original code:</p>
  <pre><code>&lt;div class=&quot;form-horizontal my-5&quot;&gt;
                  &lt;div class=&quot;form-group required&quot;&gt;
                      &lt;label class=&quot;control-label col-md-3&quot;&gt;@FieldAliasUtilities.PerformanceManagement.PerformanceManagementAgreementYear&lt;/label&gt;
                      &lt;div class=&quot;col-md-3&quot;&gt;
                          @if (Model.ContractId.HasValue)
                          {
                              @Html.DropDownListFor(model =&gt; model.ContractYearId, Model.ContractYearSelectionList, new { disabled = &quot;disabled&quot; })
                              @Html.HiddenFor(model =&gt; model.ContractYearId)
                          }
                          else
                          {
                              @Html.DropDownListFor(model =&gt; model.ContractYearId, Model.ContractYearSelectionList)
                          }
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group required&quot;&gt;
                      &lt;label class=&quot;control-label col-md-3&quot;&gt;@FieldAliasUtilities.PerformanceManagement.AssessmentFrequency&lt;/label&gt;
                      &lt;div class=&quot;col-md-3&quot;&gt;
                          @if (Model.ContractId.HasValue || Model.YearTypeId &gt; 0)
                          {
                              @Html.DropDownListFor(model =&gt; model.YearTypeId, Model.YearTypeSelectionList, new { disabled = &quot;disabled&quot; })
                              @Html.HiddenFor(model =&gt; model.YearTypeId)
                          }
                          else
                          {
                              @Html.DropDownListFor(model =&gt; model.YearTypeId, Model.YearTypeSelectionList, new { onchange = &quot;changeReviewFrequency(event);&quot; })
                          }
                      &lt;/div&gt;
                  &lt;/div&gt;
                  @if (Model.UserRole != Signify.HumanResources.PerformanceManagementV2.Contract.UserPageRoleList.User)
                  {
                      &lt;div class=&quot;form-group required&quot;&gt;
                          @Html.LabelFor(model =&gt; model.DualApprove, new { @class = &quot;control-label col-md-3&quot; })
                          &lt;div class=&quot;col-md-3&quot;&gt;
                              @if (Model.ContractId.HasValue || SettingUtilities.PerformanceManagement.ForceDualApproval)
                              {
                                  @Html.DropDownListFor(model =&gt; model.DualApprove, Model.DualApproveSelectList, new { disabled = &quot;disabled&quot; })
                                  @Html.HiddenFor(model =&gt; model.DualApprove)
                              }
                              else
                              {
                                  @Html.DropDownListFor(model =&gt; model.DualApprove, Model.DualApproveSelectList, new { onchange = &quot;changeDualApproveMessage(this.value);&quot; })
                              }
                          &lt;/div&gt;
                          &lt;div class=&quot;col-md-6&quot; style=&quot;font-size: 12px; padding-top: 10px;&quot;&gt;
                              &lt;div id=&quot;dualapprove-on&quot;&gt;* Only the @FieldAliasUtilities.PerformanceManagement.Manager will be able to create, approve and rate electronically.&lt;/div&gt;
                              &lt;div id=&quot;dualapprove-off&quot; style=&quot;display:none&quot;&gt;* Both @FieldAliasUtilities.PerformanceManagement.Employee and @FieldAliasUtilities.PerformanceManagement.Manager will be required to approve and rate electronically.&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  }
  
              &lt;/div&gt;
  </code></pre>
  <p>I was able to set the width of the first DropDownList to auto which dynamically resizes it but I haven't been able to get the other two to match the size. Any help would be appreciated.</p>