[Bug] Select Box height is not aligning

[chase439]

Version

2.0.4

Reproduction link

https://demos.creative-tim.com/material-kit/docs/2.0/components/forms.html#form-grid

Operating System

MacOS High Sierra

Device

MacBook Pro

Browser & Version

Firefox 80

Steps to reproduce

1. Go to https://demos.creative-tim.com/material-kit/docs/2.0/components/forms.html#form-grid
2. Scroll a page down to City, State and Zipcode
3. See how state select box is not aligned with City or Zipcode.

What is expected?

State select box should be aligned with City and Zipcode

What is actually happening?

State select box is not aligned with City or Zipcode.

---

Solution

https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/examples/checkout/ - it should work similar to this, which is aligning.

Additional comments

[groovemen]

Hello @chase439,

Thank you for using our products, an easy way to align the select with other forms is to change the height from this:

select.form-control:not([size]):not([multiple]) {
    height: calc(2.4375rem + 2px);
}

to this:

select.form-control:not([size]):not([multiple]) {
    height: calc(2.4375rem - 4px);
}

Hope that information helps you. Please let us know if we can help you with anything else. All the best, Stefan

[chase439]

Thank you Stefan, I was able to test it out and it solves this issue.

Would you know how to get it to align with bootstrap-select? https://jsfiddle.net/chase439/exjk4s0o/6/