Topic: MDB CSS conflict with woocommerce
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.)
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?
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.
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: 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