Custom form element display none issue


Topic: Custom form element display none issue

nevzatopcu asked 3 years ago

Hello, We are using pro version of MDBootstrap for Angular. But today, we face to faced with a css problem. The problem is that,

*Expected behavior*In our Angular project, we are rendering some custom form elements and divs from pure javascript to the page which is containing stylesheet of mdbootstrap. Everything is okey and working perfectly except MDBootstrap scss issue.

*Actual behavior*When I include

node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss

to my project it is overriding something else and my form fields, visibility of my div is changing. When I remove this scss file everything is working perfectly except mdbootstrap components. As you can see in screenshots it is giving "opacity: 0" attribute to checkbox. Also it is giving "display: none" for select. I tried it with versions "7.4.0", "7.5.0", "7.5.4" but nothing changed.

Resources (screenshots, code snippets etc.)

Without this scss file without mdb.scss

With mdb.scss file

with mdb.scss

With mdb.scss file 2

with mdb.scss 2

Edit:

My styles.scss is empty

and my angular.json file is like that:

node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss node_modules/@fortawesome/fontawesome-free/scss/solid.scss, node_modules/@fortawesome/fontawesome-free/scss/regular.scss node_modules/@fortawesome/fontawesome-free/scss/brands.scss node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss src/styles.scss


Damian Gemza staff commented 3 years ago

Dear @nevzatopcu

How do you import mdb stylesheet in your application? Via angular.json or via styles.scss or you're importing mdb.scss in both files?


nevzatopcu commented 3 years ago

@Damian Gemza I edited my post. Please check again.


Damian Gemza staff commented 3 years ago

Is there a possibility to send me your application via email? I would like to debug this problem on my end. You can find me here: d.gemza@mdbootstrap.com


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
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No