Issue
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?
Solution
You'd want to switch the dir attribute of the <html> element, not apply direction style for the rtl: Tailwind variant to match:
document.getElementsByTagName('html')[0].dir = 'rtl';
Then to have the floating label have the equivalent position in RTL as it does LTR, change the transform-origin from 0 to right. This can be done via the rtl:origin-right class. For the purposes of the inline snippet below, I've had to use the !important modifier 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.
// Function to switch the language
function switchLang() {
if (document.getElementById('lng').innerHTML == 'RTL') {
document.getElementsByTagName('html')[0].dir = 'rtl';
document.getElementById('lng').innerHTML = 'LTR';
} else {
document.getElementsByTagName('html')[0].dir = 'ltr';
document.getElementById('lng').innerHTML = 'RTL';
}
};<!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 start-1 rtl:!origin-right">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:!origin-right 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>
</body>
</html>Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.