Topic: MdBootstrap and Ckeditor problems
This problem seems to be ongoing and the various fixed throughout the net are iffy.
On my content editing page I am loading a CKEditor instance. When I use any of the editor functions which utilize a dialog box, none of the select fields function. I know WHY this is. In the mdb.css all <select> items are set to display:none !important in order to make way for the materialSelect() function to reformat the field. However this breaks in CKEditor since I can't add a class to the field. I've tried initializing materialSelect() using the <select>'s class name (cke_dialog_ui_input_select) but it just doesn't happen.
Is there a sure-fix for this?? I'm tired of not being able to use some of the options in CKEditor's dialogs because of this.
petrakid pro answered 6 years ago
I am aware of that class. However I can't easily add classes to ckeditor's dialogs as they are created deep in ckeditor's javascript. There is a much quicker and global fix:
In the mdb.css, line 10721 we have:
select {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: none !important; }
select.browser-default {
display: block !important; }
select:disabled {
color: rgba(0, 0, 0, 0.3); }
Change it to:
select {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: none !important; }
select.browser-default {
display: block !important; }
select.cke_dialog_ui_input_select {
display: block !important; }
select:disabled {
color: rgba(0, 0, 0, 0.3); }
Adding the
select.cke_dialog_ui_input_select...
globally fixes this issue.
Jakub Mandra staff premium answered 6 years ago
That is okay solution.
However, you could add your
.select.cke_dialog_ui_input_select
css to custom styles file and it would work fine as well.
Thanks for posting!
Take care :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: PC
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Jakub Mandra staff premium commented 6 years ago
We have class with higher specificity - "browser-default" - so if you add it to the select component it will be visible.