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

Hover transition styles not working, because "page-loading" is never removed


Hi,

I am trying to add a simple .hover-elevate-up class to a component, but the transition styles are not applied.

It seems that in _page-loader.scss they are overwritten:


// CSS3 Transitions only after page load(data-kt-app-page-loading="on" attribute added to body tag and removed with JS on page loaded)
[data-kt-app-page-loading="on"] {
overflow: hidden;
}

[data-kt-app-page-loading="on"] * {
transition: none !important;
}


The .page-loading is never removed from the body as you can see in react demo2 preview as well.

Can you please advise on this?

Best wishes,
Tamas


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)


Hi Tamas,

The page-loading class is a left over from the previous Metronic versions, you can just remove it from public/index.html. In React version to enable and disable splash screen you can use class splash-screen.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris,

Good to know it can be safely removed.

Thanks!
Best wishes,
Tamas



One more bug I found in index.html for react demo2:

It seems that this is a left-over from the previous theme as well. I was wondering why the fonts looked odd, and it turns out that Inter, which is the new default, is not loaded anywhere, hence it falls back to Helvetica.

I think Poppins is not used anymore and can be removed:

<link href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" />


And Inter should be added instead:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700" rel="stylesheet" />


It would be great if you could incorporate this in the next update along with removing other obsolete code.

Thanks!

Best wishes,
Tamas



Hi Tamas,

Yes, the font link should be updated in all demos, it looks like right now it is updated only in demo1.

Here is our font URL which we are using in the latest Metronic.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700">


I already fixed this issue and included it in the next release with other bug fixes you reported.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



This is great news, thank you Lauris!

This question is not related, but wouldn't worth opening a new ticket so I just post it here:

Would you consider updating Yup to v1.0.0 in the upcoming releases? All other package latest versions seem to be working fine with the theme.

Thanks for your fantastic work.

Best wishes,
Tamas



Hi Tamas,

Yes, we will check the latest Yup version and consider including it in the next release.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
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  :(