Flatpickr RTL arrow rendering issue - Vol2

Hi Keenthemes,

Sorry to dig that up : flatpickr-rtl-arrow-rendering-issue
but waited for 8.1.6 to be released, after tried the flatpicker,
it still the same thing

What I did is simple :

1 - I compiled the Metronic 8.1.6 (RTL)
2 - Put a Flatpicker html component inside index.html of the downloaded Metronic 8.1.6

<div class="mb-10">
<label for="" class="form-label">Default input style</label>
<input class="form-control" placeholder="Pick a date" id="kt_datepicker_1"/>
</div>

3 - Put its init script inside index.html
<script>
flatpickr("#kt_datepicker_1", {
enableTime: false,
allowInput: true,

dateFormat: "Y-m-d",
maxDate: "today",
locale: "ar",
});
</script>


4 - put inside html tag :
<html lang="ar" dir="rtl" direction="rtl" >


and here's the bad render :
render

the bad render on hover :
hover


Have you any thoughts, like what could be the issue, how should I debug this ?!!

PS : I did everything on a Fresh dowloaded Metronic 8.1.6, meaning anything has to do with our project. It means all ressource are comming just and JUST from Metronic, not event a single thing from the outside world


Thank you.

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 (5)

Hi,

We found out that this was a Webpack issue with RTLCSS lib. As a workaround you should do the following changes:

1) Go to tools/webpack/plugins/plugins.scss and edit wrap the flatpickr CSS with begin-rtl-ignore.css and end-rtl-ignore.css external CSS files:

@import "rtl/begin-rtl-ignore.css";
@import "~flatpickr/dist/flatpickr.css";
@import "rtl/end-rtl-ignore.css";

2) Add begin-rtl-ignore.css and end-rtl-ignore.css external CSS files into tools/webpack/plugins/rtl folder with following contents:

rtl/begin-rtl-ignore.css

/*rtl:begin:ignore*/

rtl/end-rtl-ignore.css

/*rtl:end:ignore*/

3) Recompile the webpack and it should work as expected.

We appreciate your contribution in making Metronic more bug free happy
If you need any further help please let us know.

Regards.

LoL, Thank you Sean, of course I wanted Metronic to be a piece of art, a perfect web dashboard admin template.

Anyway, are you gonna put this into next upcoming release ??? just to know if I will make this fix as function or do it temporary because Metronic will include it in the next release ?????


Thank you Sean. You've been more than helpful.

Hi Sean,

I can confirm that the Flapickr buttons (left and right)are well rendering,

But to be perfect it misses something else :
- The month is truncated from above and below, the month doesn't show the punctuation (points underneath the month writing) which is important visually to read the month, but it is not that so important ... user can guessed it, but ..:
https://ibb.co/TcFwLY0

Here's the correct month punctuation with the points :
https://ibb.co/HrfY6gj

I will be great if you could increase the height of the month container.


Thank you.

Hi,

Thank you so much for the such great feedback happy

Sure thing, we will check this as well and in the next update, all fixes will be included.

Regards.

Wonderfull.

Thank you so much Sean.

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  :(