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.
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
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 ..:
<a>https://ibb.co/TcFwLY0</a>
Here's the correct month punctuation with the points :
<a>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
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.
React Dev Vacancy
