Topic: Style issue with checkbox in input-group

Legay free asked 4 years ago

Note: actually using 4.8, but it's not an option here.

Expected behavior

When used in an input-group, material checkbox should be properly aligned just like show in the docs.

Actual behavior

Checkbox is translated down on y-axis by 12px.

Resources (screenshots, code snippets etc.)

Supposedly your docs are using 4.8, and I'm using the latest 4.8 package, but when comparing styles, they're not the same!! When inspecting the checkboxes, my version of mdb.css shows:

.md-form label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1rem;
    transition: transform .2s ease-out, color .2s ease-out;
    transform-origin: 0% 100%;
    transform: translateY(12px);
    cursor: text;
    color: #757575;

When inspecting your docs, the same class shows:

.md-form label {
    position: absolute;
    top: .65rem;
    left: 0;
    -webkit-transition: .2s ease-out;
    -o-transition: .2s ease-out;
    transition: .2s ease-out;
    cursor: text;
    color: #757575;

That last snippet looks like v4.7.7, but it is supposed to be from 4.8. What the heck??

Marta Wierzbicka staff answered 4 years ago


the first version of .md-form label is the newest. Would you paste here a link to our documentation to the specific component you mean? I'm not sure about what input you're talking about. I'll try to help you.

Best, Marta

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.7
  • Device: laptop
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No