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

Do all demo sites for metronic have the right fixed drawer like the one in demo3 dashboard?


Hello,

Do all demo sites for metronic have the right fixed drawer like the one in demo3 dashboard?

Thank you,
Dan


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


Could you please provide us with more info? What is your Metronic version and framework(React, Angular, Vue, or HTML)?



metronic 8.1.1
framework react



Hi,

Please note that each demo has its own layout features that are available only in the demo itself. A layout feature can not be reused in other layouts since each feature is coded for the particaular layout as a unique feature.

Regards.



Dully noted. Fair enough.

However I am trying to bring the right sidebar component form demo3 to demo1. I made everything available (no code errors), added

sidebar: {
display: true, // only for dashboard
}

to metronic_v8.1.1/demo1/src/_metronic/layout/core/DefaultLayoutConfig.ts, but it is not showing up. The damn thing is stubborned like a donkey happy

Could point me in some right direction, at some extent. I understand that customizing the layout is not part of support, but maybe you could share some insight about this component, if you find time.
Thank you in advance,
Dan



Hi,

The layout features require the sass code from demo3 as well and reusing the demo 3 sass in demo1 requires major changes in demo1, it would be like creating a new demo that is not covered by our standard support policy.

However, the change you like to do is doable if you can nicely merge the demo3 sass into demo1. We can consider this feature in a future update to support the sidebar panel for demo1.

Regards
Sean



Hi Sean,

Thanks for the reply. Great to hear it is already planned. Is a roadmap available as to when this feature (roughly) will be integrated in demo1?
Thanks again.



Hi,

It's very hard to give ETA here since we have hundreds of tasks on our to-do list. However, I will discuss this with our art director and consider implementing it properly so other users benefit from it. It may first be available for the HTML version as soon as possible and you can easily adapt it for the React version while React Demo1 officially receives that update. Please note that the update sync for SPA versions requires some time and extra effort.

Please follow our updates for that feature in the HTML version as soon as possible.

Regards.



Roger that happy Thanks again.

Regards ++,
Dan



Thanks again for your suggestions.

I managed to bring the sidebar from demo3 to demo1. There's only one issue in its behaviour. The default rendered Topbar and Toolbar are beneath the sidebar, but the Sticky Header is aligned perfectly. I suspect there is an obscure push directive in sass or a class that needs to be assigned the HeaderWrapper.
Could you please help with a hint.

Thanks,
Dan



Never mind.
I found also the last two things for resizing the Topbar and the Toolbar so that they are visible and not beneath the Sidebar.
How ever the tab buttons in the sidebar are not funtional (they do not switch tabs) not even in the vanilla demo3.
Is there any fix for that?

Thanks,
Dan



Hi,

It is an issue with our react demos, right now bootstrap 5 tabs will not work, you need to use react-bootstrap tabs instead.

Check react-bootstrap official doc for examples:
https://react-bootstrap.github.io/components/tabs/

We will fix this issue in upcoming releases.


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