0

I'm using dojo 1.8 and don't want any padding in my bordercontainer / contentpane layout. The problem is, it seems when I add the claro css file, instead of just applying class styles, the div's i'm using for my content panes get styles applied inline. It almost seems like this is being done programmatically, but only when I add the css file.

For instance, the contentpane I use as my header looks like this:

<div data-dojo-props="region: 'top'" 
   data-dojo-type="dijit/layout/ContentPane" 
   id="header" 
   class="dijitContentPane dijitBorderContainer-child 
     dijitBorderContainer-dijitContentPane 
     dijitBorderContainerPane dijitAlignTop" 
   title="" role="group" widgetid="header" 
   style="left: 5px; top: 5px; position: absolute; width: 1387px;">

It adds the style="left: 5px; top: 5px...." which I'm pretty sure precludes me from just overriding any type of padding or margin setting with css. I want my content panes to not have any padding or "virtual" padding by using absolute positions like this. How can I still use claro but prevent this behavior?

4

3 回答 3

2

5px 的出现是因为您在BorderContainer.

添加gutters: false到BorderContainer.

于 2012-11-01T17:23:32.290 回答
1

dijit.layout 小部件resize在渲染时执行 a ，计算它必须使用的空间，并根据它的任何布局变体进行设置（在您的情况下为 BorderLayout 子级，称为“嵌套容器”）。因此，内联样式以编程方式完成。

您的问题很可能是您自己应用的 CSS 的“权重”低于 claro.css 的样式。

检查此链接：特异性。这是一个术语，涵盖了哪个选择器的优先级最高。css-rule 越具体，优先级越高。

因此，您需要“赢得”这样的班级规则：

.claro .dijitContentPane {}

要实现它，请添加 #id 选择器 - 或 nodetype-selector 或类似的。您还可以添加前缀，例如“body”作为一般规则或“#innerContentsWrapper”作为本地化规则

.dijitContentPane { /* lowest weight */}
.claro .dijitContentPane { /* third highest weight */ }
.claro div.dijitContentPane { /* second highest weight */ }
body .claro div.dijitContentPane { /* the highest weight */ }
于 2012-11-01T17:36:18.760 回答
0

另一件可行的事情是在您的 div 上设置以下属性：baseClass="dijitContentPaneNoPadding"

于 2016-06-24T14:56:39.510 回答