Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: bg-white is rendered transparent because --mdb-bg-opacity is not defined

UNNdev priority asked 3 years ago


Expected behaviorbg-white should apply a white background color.

Actual behaviorbg-white is transparent because due to the missing variable definition --mdb-bg-opacity, the alpha is set to 0.

Am I missing something? I have to say that I am building MDB myself from modules and am not using the complete minified distribution version.


Michał Duszak staff answered 3 years ago


Hello, try defining this variable by yourself, it goes like:

.bg-white {
 --mdb-bg-opacity: 1;
}

We will check why it might be 0 by default and fix it soon. Thank you for your feedback,

Best regards


UNNdev priority commented 3 years ago

Just a hint: It's not 0 by default, it's not defined. There is no --mdb-bg-opacity in my CSS. :(

This is what I have been using to build MDB (after having set various variables):

https://pastebin.com/FhewtkHE

I've commented out the stylesheets that I don't use in my project.


UNNdev priority commented 3 years ago

Just compared the imports with those in mdb.free.scss and mdb.pro.scss and the only difference I see is that I missed to @import '~mdb-ui-kit/src/scss/bootstrap-rtl-fix/placeholders'; but since I don't use placeholders, that doesn't matter, and your style uses @import '~mdb-ui-kit/src/scss/free/utilities'; twice, once in the "Utilities" block and once in the "MDB CORE" block, but it doesn't change anything if I include the SCSS twice like you do.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: Yes
  • Provided link: No