Topic: Sidenav _variables.scss not taking effect. JS adds .sidenav-primary

webservices priority asked 1 year ago


Expected behavior
The variables in /pro/_variables.scss should take effect.

Actual behavior
JavaScript adds .sidenav-primary when no color value is set using the data-mdb-color data attribute. This renders many of the $sidenave-* vars in /pro/_variables.scss as useless/unused.

Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/standard/webservices/5402029


Kamila Pieńkowska staff answered 1 year ago


You are correct. This is a bug and we need to fix it. Until then if you need to customize this style you will need to use regular CSS.


webservices priority commented 1 year ago

Thanks. At least now I know I'm not misunderstanding something :-)


Kamila Pieńkowska staff answered 1 year ago


That is not really true. The only overridden variables are color and background color. Color options are available for people who do not want to customize full sidenav visuals themselves.

So you can decide which one you prefer to use.


webservices priority commented 1 year ago

So you can decide which one you prefer to use.

That is the problem. I cannot use one I prefer. MDB is adding .sidenav-primary to any .sidenav and will not use the default color vars. Is there a setting I can use to tell the JS not to add a .sidenav-[color] class? There is nothing I saw in the sidenav docs showing that I can "unset" the color attribute.

I also noticed that it is JS that is hard coding inline CSS to set the width and other things set in vars. Right now I am only setting width in SCSS but its completely ignored due to JS adding inline CSS.

<nav class="sidenav d-print-none sidenav-primary ps ps--active-y" tabindex="-1" data-mdb-hidden="true" data-mdb-right="true" data-mdb-color="none" style="width: 240px; height: 100vh; position: fixed; transition: all 0.3s linear 0s; transform: translateX(0%);" id="mobile-nav">
...
</nav>

Kamila Pieńkowska staff commented 1 year ago

You cannot use the unset option. Color options are used to initiate ripple effect and this is a list of available colors: 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'

What style do you want to customize? I can tell you how to do that.


webservices priority commented 1 year ago

MDB5 adds .sidenav-[color] if I do not set a color. So the default color variables set in SCSS (e.g. $sidenav-link-active-color) never get used. I would like to just have .sidenav be used and no .sidenav-[color] added at all.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: Yes
  • Provided link: Yes