Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

flatpickr RTL arrow rendering issue


Hi Keenthemes,

After digging for soooooooo long, I finally came to a conclusion that you Metronic Styling Layer over flatpickr, was the issue for the flatpickr RTL arrow rendering.

OK, bear witness.

here's the rendering on normal Metronic RTL use (the issue):
- Parte 1 (iddle) :
<a>https://ibb.co/Yb07bZM</a>

- Parte 2 : On hover :
<a>https://ibb.co/gJ7G12D</a>

.
.
.

here's the rendering using the flatpickr original style flatpickr.css file, from node_modules "../node_modules/flatpickr/dist/flatpickr.css" (We also have to desable all Metronic styles like plugins.bundle.rtl.css and style.bundle.rtl.css to isolate):
<a>https://ibb.co/K2LvwmH</a>



Please fix in the next update as this is the only missing part of our RTL machinery.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


You can try in the demo website a localization for "ar" locale as "arabic" to have an idea that it renders well the "ar" l10n:
<a>http://demo.daimabiji.com/526/#local</a>

Thank you



Hi,

Sure, we will check this issue. Can you please provide us with your JS code to initialize your date picker input? We need to reproduce the same issue on our end. Our Flatpickr examples in the documentation worked fine when hovered in RTL mode.

Regards.



Thank's for the quick reply.

Sure it works well at your end, because you may didn't use :

locale : "ar",


here's the js code used to initialize the date picker :

flatpickr(".kt-picker__present_or_past_date", {
enableTime: false,
allowInput: true,

dateFormat: "Y-m-d",
maxDate: "today",
locale: "ar",
});


Any thoughts on this ???

Thank you



Hi,

I have tested the same setup and the result was fine on hover for the latest v8.1.6 that we will release today:



Please try to test it with the latest version today and let us know the result.

Regards.



Just to see it visually, I can confirm it is working fine, LoL.

By the latest version you mean Metronic v8.1.5 ?, because that's what I'm using right now !!!.

Ahhh didn't see it, you mention v8.1.6, allright waiting for that one and I will test it and get back to you.

Thank you Sean.



You are welcome!
Yes, we are about to release Metronic v8.1.6 shortly happy


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(