mdb select and input on the same line

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
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 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?

Edyta Dabrowska 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 commented 7 years ago

Sorry, it didn't paste well. I meant label over . Is it working now?
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
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
yoojs0525
Pro User
2Support score
4Questions 0Answers
0Snippets likes 0Snippets