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

UNNdev priority asked 2 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 2 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 2 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):

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

UNNdev priority commented 2 years ago

Just compared the imports with those in and 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.


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



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