z-index problem

[RobertHeim]

Hi,

first, thanks for the nice lib! =)

On the basic square checkbox, the pretty class provides a z-index of 999 on the inner label's ::before. Is there a specific reason for this?

Actually, it requires us to implement the z-index property of a lot of elements to be at least 1000 because the boxes would shine through otherwise.

[lokesh-coder]

Hi @RobertHeim,
I am glad that you liked my work :)

There is no specific reason for setting z-index to higher order. It was just an assumption I made in earlier stage to avoid conflicting with label's ::after psuedo class. Also I thought some third party font libraries might have their own z-index in ::before

As of now z-index:1 should work fine. Let me check with all browsers and update the code ASAP.

Thanks for raising this issue :)

[RobertHeim]

Wow, fast response! =)

Okay, so what is the purpose of using z-index? It requires us to implement z-index for other components that normally would be fine with their natural order of layering.

We will probably stick to this libary anyway, but not being forced to manually set z-indexes would be great! Could the lib use opacity instead?

Thanks!

[lokesh-coder]

The square box is in label's ::after and the icon is in label's ::before. So the reason to use z-index is, to place the icon top of the square.

Also, if you noticed the code, here

You can see ::after is in absolute position and ::before is in relative position. ( to make the box responsive and adoptive to font icon size ). So Its mandatory to give z-index atleast 1 to put the icon on top of the background box.

And I guess, opacity has nothing to do with this. I agree that forcing users to set z-index is not a good thing. But I will definitely find a solution for this.

Is that helped you?

[RobertHeim]

Thank you very much for the explanation and pointing to the relevant code part.

Maybe a solution could use the natural z-index by putting the square box in the before and the icon in after?

[lokesh-coder]

The problem is most ( all) of the font icon libraries have their icon code in ::before. So, its not possible :( .

Here's some of them,

// material icons
.mdi-check:before {
    content: "\F12C";
}
//glyphicon
.glyphicon-ok:before {
    content: "\e013";
}
//typicon
.typcn-tick:before {
    content: '\e11e';
}
//ionicons
.ion-checkmark-round:before {
    content: "\f121";
}

This library just let their ::before content to override its own. Thats why .pretty i:before{} doesnt have valid content property.

[dpletiko]

I've encountered a problem with using bootstrap bootboxes with your pretty checkbox plugin.
Since you've set z-index for .pretty>input[type='checkbox'] to 99999999 when bootbox is opened you can select your checkboxes through bootbox.
It's taken me some time locate the issue, just wanted to let you know.

[DanielOrmeno]

Hello,

Awesome library! however I have come across the same issue.

99999999 for the z-index seems quite excessive, what's the reasoning behind this? @lokesh-coder

I have overwritten the style in the mean time but it would be good to understand why is so high? it even messes up with my modals.

[lokesh-coder]

Hello everyone,

The repo has been updated to Version 3 but without backward compatability.
In new version the z-index has been set to 0 1 and 2. And this can be changed from SCSS settings .

Closing now, as the new update will fix this.

Feel free to open this again if you face any other issue with z-index.

Thanks!