Horizontal Align dropdown boxes and there labels RSS

• • Reply
  roguenidb

  Member

  17 Points

  137 Posts

  Horizontal Align dropdown boxes and there labels

  Jul 22, 2020 09:04 PM|roguenidb|LINK

  I am trying at the minute to get my forms controls to appear side by side but at present their vertically stacked and taking up to much room at present.

  <div class="col-lg-3">
  <form class="row">
  
  <div class="form-row">
  <div class="form-group col-md-12">
  <label>OIC 1</label>
  @Model.StaffMembersOIC1.FirstName @Model.StaffMembersOIC1.LastName
  @if (@Model.StaffMembersOIC2 != null) {
      <br />
      <label>OIC 2</label>
      @Model.StaffMembersOIC2.FirstName @Model.StaffMembersOIC2.LastName
  
  }
  <br />
  
  @if (User.Identity.IsAuthenticated && User.IsInRole("manager")) {
      <div class="form-group col-md-16">
  
          <label>Enforcement Cat</label>
          <select asp-for="Enf_Cat" id="ddCat" class=" form-control" data-style="btn-new" asp-items="ViewBag.EnforcementCats">
              <option>Category</option>
          </select>
      </div>
      <div class="form-group col-md-16">
  
          <label>Enforcement Types</label>
          <select asp-for="Enf_Type" id="ddType" class=" form-control" data-style="btn-new" style="150px;">
              <option>Type</option>
          </select>
      </div>
      <div class="form-group col-md-16">
  
  
          <label>Enforcement Types</label>
  
          <select asp-for="Enf_Item" id="dditem" class=" form-control" data-style="btn-new">
              <option>Item</option>
          </select>
  
      </div>
      <div class="form-group col-md-16">
  
  
          <label>Priority</label>
          <select asp-for="Priority" id="dditem" asp-items="ViewBag.Prioritys" class=" form-control" data-style="btn-new">
          </select>
  
      </div>
  } else {
      @Model.Enf_Cats.Description<br />
      <label>Enforcement Types</label>
      @Model.Enf_Types.Description<br />
      <label>Enforcement Item</label>
      @Model.Enf_Items.Description<br />
  }
  </div>

  

• • Reply
  mgebhard

  All-Star

  53711 Points

  24037 Posts

  Re: Horizontal Align dropdown boxes and there labels

  Jul 22, 2020 09:16 PM|mgebhard|LINK

  The Bootstrap reference documentation illustrates the markup and CSS to create inline form inputs.

  https://getbootstrap.com/docs/4.0/components/forms/#form-grid

• • Reply
  yij sun

  Contributor

  4050 Points

  1570 Posts

  Re: Horizontal Align dropdown boxes and there labels

  Jul 23, 2020 03:27 AM|yij sun|LINK

  Hi roguenidb,

  Accroding to your codes,I suggest you could use form-group row to put your dropdown boxes and labels and you need to add col-md in your labels and dropdown boxes.
  Note:Bootstrap's grid system allow 12 columns in one row.So your col-md-16 is wrong.

  Since you don't post full codes,I create a demo,just like this:

  <div class="form-group row">
                          <div class="col-md-2">
                              <label>Enforcement Cat</label>
                          </div>
                          <div class="col-md-10">
                              <select asp-for="Enf_Cat" id="ddCat" class="form-control" data-style="btn-new" asp-items="ViewBag.EnforcementCats">
                                  <option>Category</option>
                              </select>
  
                          </div>
                      </div>
                      <div class="form-group row">
                          <div class="col-md-2">
                              <label>Enforcement Types</label>
                          </div>
                          <div class="col-md-10">
  
                              <select asp-for="Enf_Type" id="ddType" class=" form-control" data-style="btn-new" style="150px;">
                                  <option>Type</option>
                              </select>
                          </div>
  
                      </div>
                      <div class="form-group row">
                          <div class="col-lg-2">
                              <label>Enforcement Types</label>
                          </div>
                          <div class="col-lg-10">
                              <select asp-for="Enf_Item" id="dditem" class=" form-control" data-style="btn-new">
                                  <option>Item</option>
                              </select>
                          </div>
                      </div>
                      <div class="form-group row">
                          <div class="col-lg-2">
                              <label>Priority</label>
                          </div>
                          <div class="col-lg-10">
                              <select asp-for="Priority" id="dditem" asp-items="ViewBag.Prioritys" class=" form-control" data-style="btn-new">
                              </select>
                          </div>
  

  Result:

  

  Best regards,

  Yijing Sun

  ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >