Web Themes & Templates

Discussion on Metronic - Bootstrap 4/5 HTML, VueJS, React, Angular & Laravel Admin Dashboard Theme

Discussion on Metronic - Bootstrap 4/5 HTML, VueJS, React, Angular & Laravel Admin Dashboard Theme

4.89 (7,250 ratings) 4.89 stars
Cart 97,234 sales
Recently Updated
Well Documented

keenthemes supports this item

Supported

This author's response time can be up to 1 business day.

254 comments found.

riterix

riterix Purchased

Hi keenthemes,

I know that select2 is a pain in the but to work with and I messed up somewhere, but do you know why my select2 is not rendering in the right side when in RTL mode ??? although it works great in LTR mode.

here’s a screenshot : https://ibb.co/4fBWxt8

I did everything that an RTL env require (html dir=, even dir=’RTL’ for select2) everything, but without luck.

All my RTL layout works just fine, except select2.

I know I didn’t gave you some code, it’s complicated select2 rendring,, Server Side Actually.

NB : Used your method that you did in Select2 in Metronic7 (Supply the template in html, and catchup it in js as Metronic 8 ) but I don’t thing that it does matter much..

thank you guys.

Hi,

Can you please double check the original Metronic documentation with the Select2 demos: https://preview.keenthemes.com/metronic8/demo1/rtl/documentation/forms/select2.html

In the original theme the Select2 RTL mode works fine.

Have you fully followed the RTL setup as per the documentation: https://preview.keenthemes.com/metronic8/demo1/rtl/documentation/getting-started/rtl.html

If you need any further help please contact our support via support@keenthemes.com and provide us a test link to your page.

Regards, Sean

riterix

riterix Purchased

Hi keenthemes,

I don’t remember if I allready asked this question, I’m sorry : but here’s the question anyway :

Regarding RTL layout auto adjust : are you guys implmenting in the future the auto adjusting for those : data-kt-menu-placement=”right-start” => data-kt-menu-placement=”left-start”

without us making if and else on every data-kt-menu-placement manually and explicitly ???

like it was in Metronic7, the menus will be auto layout if RTL is on .

thak you guys.

riterix

riterix Purchased

Hi keenthemes.

Why There’s no datatables.bundle.rtl.css in assets folder after compilling using the RTL command : npm run build --rtl --demo6 There was no error (successfull compilling).

While this file exists in the default downloadable Metronic8 assets version.

any idea???

thank you.

Hello Im using metronic v8.0.27 does angular version have rtl support and how to implement that?

PixelDots Author Team

Hi, :)

The Angular does not have rtl support. We will consider adding it in the future updates.

Thanks

Hi Keenthemes,

in : https://preview.keenthemes.com/metronic8/demo1/documentation/base/pagination.html

Is there a way to have the paginations arrows (Previous and Next) flip automaticaly when we load RTL CSS “style.bundle.rtl.css”, like your whole Template does !?..

Rather for us to pur “if” and “elese” to check if the layour is RTL or not.

thank you.

Hi keenthemes,

Can flatpickr support locales out of the box in metronic, or should we import the i10 files in html as said in flatpickr docs ?

Are you planning to make it as you did in Metronic7 ?, like here’s the code of a datepicker in metronic7 : // inline picker $('#kt_datepicker_6').datepicker({ rtl: KTUtil.isRTL(), todayHighlight: true, templates: arrows, language: "ru" }); .just to know if you don’t plan to mke it this way, so we go the import javascript inline file route. so we don’t go back.or wait if you are to plan it.

thank you so much Keenthemes .

riterix

riterix Purchased

Hi keenthemes,

Is it hard to make the process of switching/flipping DropDowns when it comes to RTL, rather than do it manually ? : as you said here :

https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/rtl.html

data-kt-menu-placement="bottom-start" => data-kt-menu-placement="bottom-end" data-kt-menu-placement="right-start" => data-kt-menu-placement="left-start"

I mean, Like back in the Metronic7, this was like a breeze, you set your RTL config and that’s pretty much it. You got a flipped DropDowns automatically despite the layout.

Rather than go after every DropDown Menu in the App and put some ‘if’ and ‘else’ to check the Layout direction. (We have a lot of them, and not all the same = could make a Dropdown Menu component ad set it in one place, but a lot of them are differents)

I mean this is like a pain in a but, LoL

Hope I formulate it clean, sorry.

Thank you guys.

Hi,

Appreciate your feedback.

Metronic 8 uses the new KTMenu plugin and to and the placement value depends on the menu usage and parent container’s placement as well. In the JS level it’s hard to predict the best placement for each user so we leave as it is now for full control the placement values are suggested to be set right in HTML. The RTL support currently is in the CSS level and in the HTML level some adjustments are needed. We will revise this in the near future.

Regards, Sean

Hi, I have a bug in Metronic 8 -> Laravel -> RTL. When viewing user settings and clicking on the country dropdown – it flies all the way to the left side of the screen. Can that be fixed please?

Hi, thanks for replying. How do I flip the menu left or right? Also, same problem on the megamenu in RTL modes. (the bug is also in your demo online)

I suspect you may have misunderstood my meaning. I am talking about the select2 dropdown elements looking off screen in laravel RTL. This is account->settings dropdowns like (currency, timezone etc…) please have a look

PixelDots Author Team

Hi,

We will find a way to solve it. Looks like we have to exclude select2 plugin from RTL conversion.

Thanks

riterix

riterix Purchased

We just include the dark theme in our app and I came accross those dark theme pages of the whole our app, and wanted to share those feelings.

I just want to tell you guys thank you soooo much for the Metronic demo6 dark mode.

It was NEAT, PRECISE and ZEN,

Wow, without touching at anything, just load the correspondant css, and all our application theme becomes DARK.

We haven’t implement RTL support in our APP yet, but don’t tell me that this dark theme is also seamless and also true for RTL ???? if so, Hands Down guys. (IT IS A WHOLE ANOTHER LEVEL).

You’ve made a huuge smile on our faces.

On behalf of our team ,Thank you.

Keep up the good work.

Hi i am using metronic 8 laravel version (RTL) using webpack i have problem in RTL with select2 the (after i activate RTL it’s have css problem) is there any way skip this plugin from RTL because it has own RTL support is webpack have any option todo this like gulp “compile”: { ”rtl”: { “enabled”: false, “skip”: [ “select2”, “line-awesome”, “fontawesome5”, “nouislider”, “tinymce”, “sweetalert2” ] } } or there are another way to fix this and i miss something i see in online demos you fix it

PixelDots Author Team

Hi,

For the RTL, we use this plugin. In their docs, you can use comment in scss as directive to ignore RTL
https://rtlcss.com/learn/usage-guide/control-directives/index.html

In this scss file, could you please try to edit

resources/assets/core/plugins/plugins.scss
/*rtl:begin:ignore*/
@import "~select2/dist/css/select2.css";
/*rtl:end:ignore*/

Thanks

PixelDots Author Team

Hi,

At the moment, we could not find solution for this issue. We will find a way to exclude select2 from RTL process.

Thanks

Please there is no RTL version file in metronic8/vue/demo7 even //@import “assets/css/style.rtl.css”; is already hashed and not found in it’s directory.

+ can you build most of native features for Vue projects too ?

Hi,

By default, we are not including style.rtl.css into our theme.
You can generate this file by running the following command:

npm run rtl

### or

yarn rtl

Check our RTL setup doc: https://preview.keenthemes.com/metronic8/vue/docs/#/rtl

Regards,
Lauris

jasbana

jasbana Purchased

Dears,

I watched video to change font size globally in the metronic

I have suggestion regard font size and familly, usualy rtl fonts size (e.g. hebrew or arabic) are bigger that ltr font (e.g. english) if i change font size golobly it is not good choice I think, you can add these small lines so when any body want to change font famliy or size for rtl without changing ltr

font-family: $font-family-base; font-size: $font-size-base; /*rtl:raw: font-family: $font-family-base; // by default put same later if any body want to change he can change it font-size: $font-size-base; */ and if there other places you think it is good use same way

Thanks

jasbana

jasbana Purchased

it is important and will help in customization between rtl and ltr and css content property in you use arraw icons for example… hope to see this in next update and hope you can add this to team backlog

Hi :),

Since this is a global change we will need to consider it first asthis change may not be needed for the non-RTL users. Probably we will put it under RTL Setup documentation and show a way how to set up conditional font family and size for RTL Mode. I hope for your understanding.

Regards. Sean

Thanks for the latest update. Unfortunately are still 2 bugs I found that were not resolved. In the upper top bar -> user -> language (english) : when you hover on the language flag it creates a javascript error that messed up the dropdowns. This happens in all demos. Same error happens in RTL but has more issues there. The second bug is in demo 4 – RTL – icons are missing from the aside menu. Please note that running: npm run dev —demo4 -rtl does not fix the problem. It would be great it these issues can be fixed. Thanks!

To further clarify and help locate the bugs: the bug in the advanced user menu happens in both html and laravel versions that I’ve checked. The demo 4 RTL missing icons issue – I’m working in laravel so haven’t checked the html version for that. Hope that helps


Hey :)

We have been working on some amazing stuff and shortly we will be releasing:

1. HTML Version:
– Duotune In-house Designed 400+ Icons.
– Multiple Illustrations Support.
– Select2 Country List with Flag.
– Select2 User List with Avatar.
– Tagify Country List with Flag.
– Tagify User List with Avatar.

2. HTML Demo 5 – Support Forum:
– Dark Mode.
– Layout.
– Pages.
– Questions.
– Ask Question.
– Discussion.
– UI Elements.
– 3rd Party Plugins.
– In-house Components.
– Widgets.
– Layout Builder.
– Documentation.

3. Laravel Version:
– Demo 3.
– Demo 3 Dark Mode.
– Page/Route Level Config Support.
– Core Layout Improvements.
– Docs Improvements.

4. Vue Version:
RTL Support.
– Fullcalendar Plugin.
– Currency Input Mask Plugin.
– Docs Improvements.

5. React Version:
RTL Support.
– Docs Improvements.

Next Up:

1. Laravel Version:
– CRUD Solution.
– 2 Steps Authentication.
– Application Settings.
– Integrated Charts.

2. More:
– Demo 10 HTML.
– Demo 9 HTML.
– Demo 10 HTML.
– Demo 11 HTML.
– Demo 12 HTML.
– Demo 13 HTML.
– Demo 14 HTML.
– Demo 15 HTML.
– Demo 3 Vue.
– Demo 3 React.
– Demo 1 Angular.
– Vue CRUD Solution.
– React CRUD Solution.

Stay tuned for endless updates to empower your projects.

All updates are free, always!

Regards, Sean

Hi, how can I setup metronic 8 – laravel demo 4 as default? I know I can see demo 4 with adding this to the url:?demo=demo4 but I need to run demo 4 by default without that part in the url. I also need it to run RTL. How can that be achieved? Thanks!

I run into a different problem when compiling for demo 4 RTL – the menu asside icons are missing. this happened after running npm run dev—demo4

PixelDots Author Team

Hi,

Thank you for your feedback. We will check it further.

Did you use this command to generate RTL css?

npm run dev --demo4 --rtl

Thanks

jasbana

jasbana Purchased

hi i’m using metronic 7

can you add more breadcrumber separators to metronic theme like less than icon or arrow and also support rtl and ltr for these icons

if i want to do that how can i do that?

Hello. Hope you good and healthy Excuse me RTL assets not include in demo1 “metronic_v8.0.22” Is it same In other demo ”RTL assets” ?

Hi :),

Thanks for your interest in Metronic.

The RTL version assets are generated using the build tools as explained here https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/rtl.html

If you need any further clarifications please do let us know.

Regards, Sean

Thank you for your answer
my project build with “codeigniter php framework”
files “plugins.bundle.rtl.css & style.bundle.rtl.css” or ”RTL Dark CSS” aren’t in assets folder or can generate It was in before “8.0.22” update

Hi,

We will include those missing precompiled rtl/dark mode css in the next update in 1-2 days.

In the meantime, you can generate them by referring to https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/rtl.html https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/dark-mode.html

Regards, Sean

Hello, i have a question, i am using angular version, there is any way to use rtl and ltr in the same time, one click to switch to rtl and another click to switch to ltr

Stam88 Author Team

Hi, ibrahimalsurkhi.

We don’t have an example of runtime switcher between ltr/rtl versions.

Regards, Keenthemes support

jasbana

jasbana Purchased

Hi Dears,

I have few questions: - I want to use local fonts instead of online font like google, how can i do it? - I want to have diffrent font so in ltr version i want font x and in rtl version i want font b how can i acheive that?

Thanks

Hi :),

Thanks for your interest in Metronic.

You can refer to https://www.youtube.com/watch?v=zJwx3Iw6iHc tutorial to learn how to include local font files into your build. Thus you can have 2 bundles for LTR and RTL versions generated separately with different font family files.

For any further assistance please contact our support via support@keenthemes.com

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

jasbana

jasbana Purchased

hi dear,

why option of dark/light theme is not in page builder ? hope you can add it in builder options this will be great

also how can we see dark theme in rtl?

also option to search main menu (aside) items?

also dark mode for landing page?

thanks

by
by
by
by
by
by