Topic: Select fields disappear
I already have bootstrap integrated in my member's website. I expect adding the MDB css library wouldn't change the display and function of my site.
When I add the MDB css library, my select fields disappear (display:none)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 5 years ago
Do you have some example of this problem? You can put it in our snippets https://mdbootstrap.com/snippets/.
aeromir free commented 5 years ago
Here is a sample:
Without MDB: https://my.aeromir.com/temp1.cfm
With MDB: https://my.aeromir.com/temp1b.cfm
The Source and Type drop downs and the delete checkbox disappear on the second version.
This style definition in your mdb.css file seems to be causing the problem:
select { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; display: none !important; }
Piotr Glejzer staff commented 5 years ago
which version do you use? 4.8.2?
do you use our initial code start? like that :
$('mdb-select').materialSelect();
aeromir free commented 5 years ago
4.8.1.I only see a download for 4.8.2 free. Where do I go for a pro 4.8.2 download?
I added this to the bottom of the page
http://f1.aeromir.com.s3-us-east-2.amazonaws.com/2/2019/05/mdbdebug.png
Piotr Glejzer staff commented 5 years ago
You should have a link on your profile. You initiate a material_select with '.mdb-select' class but you don't have this class in your HTML file.
aeromir free commented 5 years ago
Thanks for pointing me to the download link.
Do I have to add the material_select class to every select field on my site to prevent them from disappearing?
aeromir free commented 5 years ago
I still can't get this to work. I simplified it on this page:
https://my.aeromir.com/mdb.cfm
This is directly from an example you posted on this page:
https://mdbootstrap.com/support/general/mdb-select-2/
As you can see, the select field is not displayed.
I checked all of the files and they are all loading. I'm using 4.8.2.
What is wrong?
aeromir free commented 5 years ago
I found out part of the solution. Your javascript was incorrect in the example above. This is the correct js:
$( document ).ready(function() { $('.mdb-select').material_select(); });aeromir free commented 5 years ago
Next question is can I use a select WITHOUT mdb?
Your checkboxes are also confusing. I found documentation of how to add them but it only works with one checkbox per page as you use the ID attribute, which has to be unique for each checkbox.
See https://my.aeromir.com/temp1b.cfm
Piotr Glejzer staff commented 5 years ago
You are posting tag script in a wrong place. You have to post it below scripts with jquery, popperr.min , mdb.js, and others. I don't understand your question about 'can I use select..'. Yes, you can use it. We using camelCase and snake_case in material select to initiate this component but we will remove snake_case dependency ( material_select) in the nearly future. Checkboxes should have a unique id to connect with label name.