Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

relative class needed for Icon HR and Text with HR #259

Open
shinokada opened this issue Aug 27, 2022 · 2 comments
Open

relative class needed for Icon HR and Text with HR #259

shinokada opened this issue Aug 27, 2022 · 2 comments
Assignees
Labels
bug Something isn't working v1.6.3 Issues and tasks for v1.6.3 release

Comments

@shinokada
Copy link
Contributor

Describe the bug
Without relative in the parent div, Icon HR and Texti with HR won't work.

To Reproduce
From the doc:

<p class="text-gray-500 dark:text-gray-400">Track work....</p>
<div class="inline-flex justify-center items-center w-full">
    <hr class="my-8 w-64 h-1 bg-gray-200 rounded border-0 dark:bg-gray-700">
    <div class="absolute left-1/2 px-4 bg-white -translate-x-1/2 dark:bg-gray-900">
        <svg aria-hidden="true" class="w-5 h-5 text-gray-700 dark:text-gray-300" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z" fill="currentColor"></path></svg>
    </div>
</div>
<p class="text-gray-500 dark:text-gray-400">Deliver great service exp ...</p>

You need <div class="relative">:

<div class="relative">
<p class="text-gray-500 dark:text-gray-400">Track work....</p>
<div class="inline-flex justify-center items-center w-full">
    <hr class="my-8 w-64 h-1 bg-gray-200 rounded border-0 dark:bg-gray-700">
    <div class="absolute left-1/2 px-4 bg-white -translate-x-1/2 dark:bg-gray-900">
        <svg aria-hidden="true" class="w-5 h-5 text-gray-700 dark:text-gray-300" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z" fill="currentColor"></path></svg>
    </div>
</div>
<p class="text-gray-500 dark:text-gray-400">Deliver great service exp ...</p>
</div>

I think there are more where you use absolute and there is no relative class in the doc.

@zoltanszogyenyi
Copy link
Member

Hello @shinokada,

Thank you for reporting.

Will get fixed soon for the v2.0 update.

@zoltanszogyenyi zoltanszogyenyi self-assigned this Sep 12, 2022
@zoltanszogyenyi zoltanszogyenyi added the bug Something isn't working label Sep 12, 2022
@zoltanszogyenyi
Copy link
Member

Moved this for the v1.6.0 update.

@zoltanszogyenyi zoltanszogyenyi added the v1.6.3 Issues and tasks for v1.6.3 release label Dec 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working v1.6.3 Issues and tasks for v1.6.3 release
Projects
Development

No branches or pull requests

2 participants