Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MdBootstrap and Ckeditor problems

luthersites pro asked 6 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 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.


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.



Please insert min. 20 characters.

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: 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