Topic: form-control class input is not aligned with other elements inside form-inline class

delphiadev pro asked 7 years ago


<form class="form-inline">
 <label for="file-picker" class="control-label">CSV file</label>
 <input type="file" id="file-picker" class="form-control">
 <button type="button" id="upload-btn" class="btn btn-primary waves-effect waves-light">Upload</button> 
</form>

Using the syntax above, based on Bootstrap 4 documentation, all the elements should be aligned nicely but MDB does not handle that. As a result the label, input element, and button are not aligned. I have to disable .form-control from MDB css to get the aligning back. Will there be a fix that will handle situation so I don't have to add another css rules to disable MDB style on this situation?


Bartłomiej Malanowski staff commented 7 years ago

Could you please provide us more details? Please attach a screenshot and tell us what's your browser, os/device

delphiadev pro commented 7 years ago

How do I attach screenshot? Your text editor does not provide capability to upload picture. Browser: Google Chrome OS: Windows 10

delphiadev pro commented 7 years ago

Look at https://getbootstrap.com/docs/4.0/components/forms/#inline-forms . The input elements and button are aligned properly. If you take my code and add MDB style, the input element is placed higher than the button because of the extra margin-top and margin-bottom on the .form-control class.


Thanks for letting us know. We'll take care of it in the next release

delphiadev pro commented 7 years ago

Good to hear that. When is the approximate date of the next release?

Bartłomiej Malanowski staff commented 7 years ago

I hope the next version will be shipped next month


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