Clickable links in label

[andrekovac]

I saw that you're working on a new version right now. Therefore I won't file a PR which might collide with your work but add this so that others might benefit from it and you might add this in the new version:

If you have a label with links (<a> tags) in it, they won't be clickable when using your package, even if you raise the z-index for these links.

To solve this (i.e. for the links to be clickable) I had to restrict the width of the input element, i.e.

.pretty input {
	max-width: 20px
}

I used 20px, but this should of course depend on the size of the checkbox you may choose.

[lokesh-coder]

Hi @Andruschenko ,

Thank you so much for the solution. :+1:

I am aware of the fact that, label needs more customization. Rightnow, I am trying to move the complete logic out of label, which will solve this issue.

[chadsteele]

Also, long labels are not responsive due to nowrap, see below. I tried fixing myself, but the CSS for layout is complicated and nothing seems to work. Do you happen to already have a solution? Will that be fixed in the next release? Thanks

.pretty {
...    white-space: nowrap;
}

[pmonte]

What about: .pretty a { z-index: 3; position: absolute; margin-left: -1rem; }

[jmcbsimmonds]

I was able to make pretty check box handle wrapping of long text for labels and allow for click-able links within them with the following:

.pretty .state label { white-space: normal; text-indent: unset; padding-left: 5vw; /* Change to your preferred dimensions */ }

/* This will make the use of an svg align correctly, you may need to add other formats if you use them. */ .pretty.p-svg .state .svg, .pretty .state label:after, .pretty .state label:before { top: 0; }

/* Make pretty checkbox handle links in labels, thanks goes to pmonte, for a pointer in the right direction */ .pretty a { z-index: 3; position: relative; }