I've copied the floating labels block from flowbite here to make this sample test.
The problem that the code is working fine in LRT direction, however if we switch to RTL direction it will miss up lable spaceing from start or the start margin is incorrect it's not equal to when in LTR direction! please click the switch to in the sample below and check it out.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Sample</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
</head>
<body>
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">test page</h2>
</div>
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<div class="space-y-6">
<div class="relative">
<input type="text" autocomplete="off" id="floating_outlined" class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" "
/>
<label for="floating_outlined" class="absolute text-sm text-gray-500 duration-200 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">My Floating Label (1)</label>
</div>
<div class="relative">
<input type="text" autocomplete="off" id="floating_outlined" class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" "
value="This is a test" />
<label for="floating_outlined" class="absolute text-sm text-gray-500 duration-200 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">My Floating Label (2)</label>
</div>
</div>
<div class="mt-8 text-center text-sm text-gray-500">
<a>Switch To:</a>
<a id="lng" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500 cursor-pointer" onclick="switchLang()">RTL</a>
</div>
</div>
</div>
<script>
// Function to switch the language
function switchLang() {
if (document.getElementById('lng').innerHTML == 'RTL') {
document.getElementsByTagName('html')[0].style.direction = 'rtl';
document.getElementById('lng').innerHTML = 'LTR';
} else {
document.getElementsByTagName('html')[0].style.direction = 'ltr';
document.getElementById('lng').innerHTML = 'RTL';
}
};
</script>
</body>
</html>I tried to fix that by many ways like adding negative margins for only when in RTL but it doesn't work however it made it worse, maybe there is something else that I don't know is happing.
any fix for that please?
You'd want to switch the
dirattribute of the<html>element, not applydirectionstyle for thertl:Tailwind variant to match:Then to have the floating label have the equivalent position in RTL as it does LTR, change the
transform-originfrom0toright. This can be done via thertl:origin-rightclass. For the purposes of the inline snippet below, I've had to use the!importantmodifier with this class since otherwise the Flowbite CDN CSS would override the rule.Also, you seem to have some invalid HTML,
</Label></label>– consider removing the capitalized end tag.