Topic: Select baseline not aligned with other form elements
<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>
Mikołaj Smoleński staff answered 7 years ago
mt-3
to the select md-form element.
Regards wojt commented 7 years ago
Thanks for that, now it is only a pixel or two off - good enough!Marta Szymanska staff pro premium answered 7 years ago
wojt commented 7 years ago
Yes, works great now, thank you.Marta Szymanska staff pro premium commented 7 years ago
Ok, great.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Vadim Pedchenko commented 7 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 commented 7 years ago
Thank you Vadim, that works perfectly!