Topic: Select next to input field in one row not aligned
<div class="row">
<div class="col">
<div class="md-form">
<input type="text" id="form1" class="form-control">
<label for="form1" >Example label</label>
</div>
</div>
<div class="col">
<select class="mdb-select colorful-select dropdown-primary">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<label>Blue select</label>
</div>
</div>
hquick pro commented 7 years ago
But then i would expect a overall top margin and not only for the select input. When i arrange two normal inputs next to each other they are perfectly alligned. Only when i use a select input the alignment is off. Maybe I'm doing sth. wrong here. What is the solution to put one normal input and a selct input in one row next to each other ? Can you give an example ?Ollie Vincent pro commented 7 years ago
This is because your form has a margin top of 1.5rem on it. Use the bootstrap class <code>mt-0</code> to remove it. Your HTML should look like this: <pre>div class="md-form mt-0"> <input id="form1" class="form-control" type="text"> <label for="form1" class="">Example label</label> </div></pre> Only danger then is that when the form is selected the placeholder text shifts upwards (possibly onto other text)? See what you thinkFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No