Select next to input field in one row not aligned

Topic: Select next to input field in one row not aligned

hquick pro asked 6 years ago

Hi, when I try to put a input field next to a select it just doesn't look good. The select is not aligned with the input field next to it. This is what I am using at the moment:

<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>

Add comment

Ollie Vincent pro answered 6 years ago

0 0 Best answer

Isn't that because the form has a margin top on it?

hquick pro commented 6 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 6 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 think

Add comment

Write

Create snippet

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: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

hquick

Pro User 0Support score
1Questions 0Answers 0Snippets