Style issue with checkbox in input-group


Topic: Style issue with checkbox in input-group

Legay asked 3 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 Szymanska staff pro premium answered 3 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
  • 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