Topic: MDB CSS conflict with woocommerce

RalfGlaser free asked 4 years ago


I'm currently implementing Woocommerce on a custom WP theme based on MDB. I have the problem that on the checkout page the country select fields don't show up and found the solution in mdb.min.css. There is a declaration as follows:

select{font-family: .... ;display:none!important}

deactivating that declaration in Google Chrome tools bring the select fields up and they are working as intended. Since in mdb.min.css it's declared with !important I cannot easily overwrite that behaviour. And changing mdb.min.css isn't the best idea ... so I have 2 questions:
1. How can I overwrite that and make the select show up?
2. Why are selects declared as "display:none!important"? Is that a bug? Doesn't make to much sense to me, to be honest.

Thanks in advance, Ralf

Resources (screenshots, code snippets etc.)


RalfGlaser free answered 4 years ago


Yes, I already run in problems since other selects (from other plugins) broke. I resolved it by putting a inline-style on the page where I needed it and left the mdb.min.css untouched. Thank you about the tip with the additional css class. Will keep that in mind when using a mdb select.



It's because you're using MDB Pro, where the standard selects are being hidden. To make them work again, please add the .browser-default class to them.


RalfGlaser free answered 4 years ago


I managed to overwrite it with my own definition select{display: block!important;} but since the element is created dynamically by Woocommerce and has no ID nor class let's see what problems I will get later on ... Remains strange. Why are selects set to "display:none" as a default?



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: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.0
  • Device: PC
  • Browser: Chrome
  • OS: Mac OS X
  • Provided sample code: No
  • Provided link: No