Topic: Select baseline not aligned with other form elements

wojt free asked 6 years ago


I am just starting to use MDBootstrap and am having some trouble getting the select boxes to align properly with other form elements. This image shows what is happening. Any thoughts on where I am going wrong?
<div class="col-8">
 <div class="card">
 <h2 class="card-header">Edit Clinic</h2>
 <div class="card-body">
 <form method="post" action="/Clinics/Edit/1">
 <input type="hidden" data-val="true" data-val-required="The Id field is required." id="Id" name="Id" value="1" />
 <div class="md-form">
 <input class="form-control" type="text" data-val="true" data-val-required="Please enter a valid clinic name." id="Name" name="Name" value="Freddy's" />
 <label for="Name">Name</label>
 <span class="text-danger field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
 </div>
 <div class="md-form">
 <input class="form-control" type="text" id="AddressLine1" name="AddressLine1" value="Suite 202" />
 <label for="AddressLine1">Address Line 1</label>
 <span class="text-danger field-validation-valid" data-valmsg-for="AddressLine1" data-valmsg-replace="true"></span>
 </div>
 <div class="md-form">
 <input class="form-control" type="text" id="AddressLine2" name="AddressLine2" value="400 Hunter Street" />
 <label for="AddressLine2">Address Line 2</label>
 <span class="text-danger field-validation-valid" data-valmsg-for="AddressLine2" data-valmsg-replace="true"></span>
 </div>
 <div class="form-row">
 <div class="md-form col-md-6">
 <input class="form-control" type="text" id="Suburb" name="Suburb" value="NEWCASTLE" />
 <label for="Suburb">Suburb</label>
 </div>
 <div class="md-form col-md-3">
 <input class="form-control" type="text" id="Postcode" name="Postcode" value="2300" />
 <label for="Postcode">Postcode</label>
 </div>
 <div class="md-form col-md-3">
 <select class="mdb-select" id="State" name="State"><option value="0">ACT</option>
<option selected="selected" value="1">NSW</option>
<option value="2">NT</option>
<option value="3">QLD</option>
<option value="4">SA</option>
<option value="5">TAS</option>
<option value="6">VIC</option>
<option value="7">WA</option>
</select>
 <label for="State">State</label>
 </div>
 </div>
 <div class="md-form">
 <input class="form-control" type="text" id="PhoneNumber" name="PhoneNumber" value="" />
 <label for="PhoneNumber">Phone Number</label>
 <span class="text-danger field-validation-valid" data-valmsg-for="PhoneNumber" data-valmsg-replace="true"></span>
 </div>
 <div class="md-form">
 <input class="form-control" type="text" data-val="true" data-val-regex="Fax number must be exactly 10 digits long, without spaces or letters, and begin with a 0. Have you included the area code?" data-val-regex-pattern="0[2378]d{8}$" data-val-required="Fax number is required." id="FaxNumber" name="FaxNumber" value="0200000000" />
 <label for="FaxNumber">Fax Number</label>
 <span class="text-danger field-validation-valid" data-valmsg-for="FaxNumber" data-valmsg-replace="true"></span>
 </div>
 <div class="text-center">
 <button class="btn btn-primary" type="submit">Save</button>
 <a onclick="history.go(-1)" class="btn btn-outline-dark">Cancel</a>
 </div>
 </div>
 </div>
</div>
 

Vadim Pedchenko free commented 6 years ago

Find: .select-wrapper input.select-dropdown, Comment or replace by: /* START SELECT FIX*/ .select-wrapper input.select-dropdown { position: relative; cursor: pointer; background-color: transparent; border: none; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ced4da; outline: 0; line-height: 1.5; color: #495057; width: 100%; font-size: 1rem; padding: .3rem 0 .55rem 0; display: block } .form-sm .select-wrapper + label { font-size: .75rem !important; } .form-lg .select-wrapper + label { font-size: .95rem !important; top: -21px; } /* END SELECT FIX */

wojt free commented 6 years ago

Thank you Vadim, that works perfectly!

Marta Wierzbicka staff answered 6 years ago


Hi, thank you Vadim Pedchenko for your solution. And wojt, is Vadim Pedchenko's answer enough for you? Best, Marta

wojt free commented 6 years ago

Yes, works great now, thank you.

Marta Wierzbicka staff commented 6 years ago

Ok, great.

Mikołaj Smoleński staff answered 6 years ago


Hi, Try to add mt-3 to the select md-form element. Regards

wojt free commented 6 years ago

Thanks for that, now it is only a pixel or two off - good enough!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags