1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Material select doesn\\’t align horizontally with text fields in forms

Chester pro asked 7 years ago

I have a material select which I placed vertically with textfields. It does not align well. Refer screenshot: https://ibb.co/fPbt9Q 
<div class="row">
<div class="col-lg-4">
<div class="md-form">
<select class="mdb-select">
<option value="" disabled selected>Choose your country</option>
<option value="1">Australia</option>
<option value="2">Austria</option>
<option value="3">Germany</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="md-form">
<input type="text" id="form15" class="form-control">
<label for="form15">Organisation</label>
</div>
</div>
<div class="col-lg-4">
<div class="md-form">
<input type="text" id="form16"class="form-control">
<label for="form16">Country</label>
</div>
</div>
</div>

Marta Wierzbicka staff answered 7 years ago

Hi, add to <select class="mdb-select"> this class: .mt-3. Of course you can change 3 to other number from 1 to 5. Best, Marta

Marta Wierzbicka staff answered 7 years ago

Hi,

so just add new margin-top to the select input.

Best,

Marta

Sara Rodríguez free commented 7 years ago

Hi! I added the margin-top and it does not work :( https://ibb.co/b81C0w <pre>Start your code here</pre> <div class="col-md-3"><div class="col-md-3"> <div class="md-form">     <input placeholder="Seleccione una fecha" type="text" name="prf_fna"  id="prf_fna" class="form-control">     <label for="prf_fna"><%=etiquetas.getEtiqueta("3002")%></label> </div> </div> <div class="col-md-3"><div class="col-md-3"> <div class="md-form"> <select id="prf_tdo" name="prf_tdo" class="mdb-select" style="margin-top: 10px;">     <option value="1"><%=etiquetas.getEtiqueta("2198")%></option>     <option value="2">Option 2</option>     <option value="3">Option 3</option> </select> <label for="prf_tdo"><%=etiquetas.getEtiqueta("2197")%></label> </div> </div>  
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: No
  • Browser: No
  • OS: No
  • Provided sample code: No
  • Provided link: Yes
Tags
material-select
About author
Chester
Pro User 10Support score
3Questions 5Answers 0Snippets