themesberg / themesberg/flowbite
relative class needed for Icon HR and Text with HR
Open
@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.
- https://flowbite.com/docs/typography/hr/#hr-with-text
- https://flowbite.com/docs/typography/hr/#icon-hr
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.