Sidenav _variables.scss not taking effect. JS adds .sidenav-

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

webservices priority asked 10 months 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

Add comment

Kamila Pieńkowska staff answered 10 months ago

1 0 Best answer

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 9 months ago

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

Add comment

Kamila Pieńkowska staff answered 10 months ago

0 0 Best answer

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 10 months 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>

<blockquote>
  <p>So you can decide which one you prefer to use.</p>
</blockquote>

<p>That is the problem. I cannot use one I prefer. MDB is adding <code>.sidenav-primary</code> to any <code>.sidenav</code> and will not use the default color vars. Is there a setting I can use to tell the JS not to add a <code>.sidenav-[color]</code> class? There is nothing I saw in the <a href="https://mdbootstrap.com/docs/standard/navigation/sidenav/#docsTabsAPI" target="_blank">sidenav docs</a> showing that I can "unset" the color attribute.</p>

<p>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.</p>

Please insert min. 15 characters.

Kamila Pieńkowska staff commented 10 months 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 10 months 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.

Add comment

Write

Create snippet

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

webservices

5Support score
13Questions 5Answers 6Snippets