mdb select and input on the same line

Topic: mdb select and input on the same line

yoojs0525 pro asked 6 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>

Add comment

Edyta Dabrowska free answered 6 years ago

0 0 Best answer

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 6 years ago

Ok! Thanks.

Edyta Dabrowska free commented 6 years ago

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

Add comment

Edyta Dabrowska free answered 6 years ago

0 0 Best answer

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

yoojs0525 pro commented 6 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?

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

yoojs0525

Pro User 2Support score
4Questions 0Answers 0Snippets