flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

relative class needed for Icon HR and Text with HR

Open shinokada opened this issue 2 years ago • 1 comments

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.

shinokada avatar Aug 27 '22 23:08 shinokada

Hello @shinokada,

Thank you for reporting.

Will get fixed soon for the v2.0 update.

zoltanszogyenyi avatar Sep 12 '22 12:09 zoltanszogyenyi

Moved this for the v1.6.0 update.

zoltanszogyenyi avatar Dec 07 '22 10:12 zoltanszogyenyi