Topic: mdb select and input on the same line

yoojs0525 pro asked 7 years ago


Hi.I am trying to implement mdb select and one input on the same line, but having a difficulty in doing so. I could put them on the same line, but it is still hard for me to leave them on the exact same line. When I used the below code, the position of select is slightly lower than the one of input, and it looks bad. Is there anyway to solve this issue?I really appreciate your help!
Start your code here
<div class='row' id='example_wrap'>
 <div class='col-3'>
 <label id='example_label'>Example label</label>
 <select class="mdb-select">
 <option value="" disabled selected>Choose your option</option>
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
 </select>
 </div>
 <div class='col-9'>
 <div class="md-form" id='example_form'>
 <input type="text" id="something" class="form-control" value=' '>
 </div>
 </div>
 </div>

Edyta Dabrowska free answered 7 years ago


Please try changing input height or adding label over
. Also try changinf 'px' to 'rem' unit. Let me know if you have further issues.

yoojs0525 pro commented 7 years ago

Ok! Thanks.

Edyta Dabrowska free commented 7 years ago

Sorry, it didn't paste well. I meant label over . Is it working now?

Edyta Dabrowska free answered 7 years ago


Have you tried adding margin-top to your input field?

yoojs0525 pro commented 7 years ago

Yes. I could achieve my goal by changing it manually. However, I am not sure if it would be shown properly on any device. (from smartphone to iPad and computers) This might be a little bit out of topic, but when I change the margin-top, does the 'px' unit cause a problem like the one I described?


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: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags