Dojo表格与bootstrap 的CSS样式有冲突的问题

最新推荐文章于 2024-09-10 10:06:19 发布

原创最新推荐文章于 2024-09-10 10:06:19 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dojo #bootstrap

web 前端同时被 2 个专栏收录

3 篇文章

订阅专栏

Dojo

1 篇文章

订阅专栏

本文介绍了解决Dojo框架与Bootstrap样式冲突的方法。通过调整Dojo表格控件中的某些元素样式，解决了两者间因渲染顺序不同导致的CSS样式问题。

当采用bootstrap对前台页面进行布局时，如果引用了Dojo的框架，可能会因为渲染顺序，产生一些CSS样式的问题，例如，在引用了bootstrap的样式后，Dojo的表格会出现如下图的一段空白。

表头和表的内容之间出现了空白

经试验，是由Dojo的表格控件的元素造成
在Dojo的源码中，dojox/grid/resource/View.html有如下两行

<input type="checkbox" class="dojoxGridHiddenFocus" dojoAttachPoint="hiddenFocusNode" role="presentation" />
<input type="checkbox" class="dojoxGridHiddenFocus" role="presentation" />

当把这两行的style设置为如下属性时，空白的问题得以解决，表格能正常显示

<input type="checkbox" class="dojoxGridHiddenFocus" dojoAttachPoint="hiddenFocusNode" role="presentation" style="position:absolute"/>
<input type="checkbox" class="dojoxGridHiddenFocus" role="presentation" style="position:absolute"/>