materialize-css 选择样式 display:none 应用于 ckeditor 对话答案

【问题标题】：materialize-css select styles display:none are applied to ckeditor dialoguesmaterialize-css 选择样式 display:none 应用于 ckeditor 对话
【发布时间】：2020-12-07 09:52:56
【问题描述】：

我正在尝试通过构建博客 webapp 来学习 Django-Python 框架。我正在使用 Materialize CSS Framework 1.0.0 进行样式设置。此外，我使用 CKEditor 4 创建帖子。我希望用户能够添加 CodeSnippets。 CKEditor 在我的静态目录中并且渲染得很好，但是当我打开coden-p 对话框时我无法选择语言。

codesnippet dialog

我发现 materialize-css 库将 "display: none" 应用于所有选择输入。 Materialize 不在我自己的目录中，但我使用的是 CDN，所以我无法调整它。

我尝试了以下方法：

我检查了 Chrome 开发工具中的元素并在 ckeditor/dialog/styles/dialog.css 中添加了以下内容：

.cke_dialog_ui_input_select { display: block; }

此外，在我的 base.html 中 body 标记的末尾我添加了：

    <script>
     $(document).ready(function(){
      $('select').css("display","block");
     });
     console.log("display to block");
    </script>                                                                                  
  </body>

我也在上面的脚本中试过这个：

  $(document).ready(function(){
   $('select').formSelect();                                                                       
  });

我中断服务器并在每次更改后应用 python manage.py runserver。但是当我再次在 Chrome 开发工具中检查它时，我仍然看到 Materialize 将显示设置为无。我在这里找到了一些东西 Drupal - materialize-css select styles are applied to ckeditor dialogues ，不过没看懂。

我能想到的最后一件事是将 JQuery 事件 .ready 更改为带有 onload 的东西。

提前谢谢你。

【问题讨论】：

您可以给任何选择一个browser-default 的类以将其从Materialize 样式中删除。
如何在页面上渲染html？ <select class="browser-default"></select> 你可以在这里看到，任何带有此类的选择都不会受到具体化样式的影响：codepen.io/doughballs/pen/bGpexMp
我把脚本改成了<script> $(document).ready(function(){ $('select').formSelect({ classes: "browser-default" }); }); </script>，就像这里设置的materializecss-select-options。但它不适用于对话框。
我明白你在说什么。在我自己的表单中它只是工作，class PostForm(forms.ModelForm): class Meta: model = Post fields = ['title', 'category', 'front_image', 'content'] widgets = { 'title' : forms.TextInput(attrs={'class': 'form-control'}), 'category' : forms.Select(attrs={'class': 'browser-default'}, choices=SUBJECT_CATEGORY), 'content' : forms.Textarea(attrs={'class': 'form-control'}), }
这不是您在选择上设置类的方式，正如文档页面上所说：“要添加到选择包装器元素的类。”。我再问你一次——你如何在页面上渲染 html？

标签： javascript css ckeditor materialize django-ckeditor

【解决方案1】：

我解决了。

在我的静态文件中我添加了一个 main.css，以便 static/blog/main.css

main.css：

select.cke_dialog_ui_input_select {
  display: block;
}

我在 base.html 模板的部分添加了链接：

 &lt;link rel="stylesheet" text="text/css" href="{% static 'blog/main.css' %}"&gt;

AFTER/UNDER具体化 CSS 参考链接。

我清除了我的谷歌浏览器缓存。 Clear Chrome Cache

当我现在打开代码sn-p（红色圆圈）时，我可以选择一种语言。 Answer

感谢肖恩的帮助；p

【讨论】：