Topic: MdBootstrap and Ckeditor problems
                  
                  luthersites
                  pro
                  asked 7 years ago
                
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.
                      
                      Jakub Mandra
                      staff
                        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 :)
                      
                      luthersites
                      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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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 commented 7 years ago
We have class with higher specificity - "browser-default" - so if you add it to the select component it will be visible.