Topic: [Bug Report] Checkbox align bottom, when label wraps

Weiser pro asked 4 years ago


Hi,

i've already asked this question, but got no answer, so here again:

I tried to use checkboxes inside div with specific width. When the label text is too long checked checkboxes align bottom:

you can barely see, that the white checkmark stays in place, but the filled box align bottom.

heres some HTML to reproduce this issue:

https://code.sololearn.com/WWXA5knG7PXU/#html

 

I also tested the checkbox example on your doc page. If you shrink the screen to 200px width, you get the same result.

heres a screenshot of your example checkbox. i changed the background to green, so you can see the issue better

i think the class "filled-in" is broken, because the classic checkbox works well.


Damian Gemza staff answered 4 years ago


Hello Weiser, Sorry for your waiting time. I have a fix which will solve your problem. Please head into /scss/mdb/pro/_checkbox.scss, and  add top: 0 style after line 120 (z-index: 0).
&:checked {

+ label:before {

top: 0;

left: 1px;

width: 8px;

height: 13px;

border-color: transparent$input-bg-color$input-bg-colortransparent;

}

+ label:after {

border-color: $secondary-color;

background-color: $secondary-color;

z-index: 0;

}

}
Should look in this way:
&:checked {

+ label:before {

top: 0;

left: 1px;

width: 8px;

height: 13px;

border-color: transparent$input-bg-color$input-bg-colortransparent;

}

+ label:after {

border-color: $secondary-color;

background-color: $secondary-color;

z-index: 0;
top: 0;

}

}
Best Regards,
Damian

Weiser pro commented 4 years ago

Worked! Thanks a lot, Damian. Will this be fixed in next release?

Damian Gemza staff commented 4 years ago

Glad that could help you! Yes, this fix will be included in next release, so don't worry about next MDB update. Best Regards, Damian

FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags