themesberg / themesberg/flowbite

relative class needed for Icon HR and Text with HR

Open
#259 2 comments 0 reactions 1 assignee View on GitHub

@zoltanszogyenyi is already working on this.

Since Sep 12, 2022.

bug v1.6.3
Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.