Unexpected class present on radio/checkbox cards component

[bbredewold]

Flux version

v1.1.6

Livewire version

v3.6.3

Tailwind version

v3.4.17

Browser and Operating System

Firefox on MacOS

What is the problem?

On these files:

• stubs/resources/views/flux/checkbox/variants/cards.blade.php
• stubs/resources/views/flux/radio/variants/cards.blade.php

...the *:relative class is applied.

I think this is a mistake, since this tailwind class makes all child elements relatively positioned. This impacts all the elements that the user is inserting via the $slot. For example, we use an absolutely positioned element, but this gets converted back to relative since it's specificity is lower.

For now I fixed it with !important, but I think it's evident that this greedy class should not by used here.

Code snippets

<flux:radio.group label="Shipping" variant="cards" :indicator="false">
    <flux:radio value="1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <div class="absolute bottom-0 right-0 bg-red-500">I should be absolute right?</div>
    </flux:radio>
</flux:radio.group>

How do you expect it to work?

I expect *:relative to be gone ;)

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@bbredewold thanks for reporting! I've submitted a PR with a fix.