Topic: Select next to input field in one row not aligned
hquick pro asked 5 years ago
<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>
Ollie Vincent pro answered 5 years ago
hquick pro commented 5 years agoBut 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 5 years agoThis 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 think
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No