Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Style issue with checkbox in input-group

Legay free asked 5 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 5 years ago


Hi,

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.

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: 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