更改 Dojo ToolTipDialog 的填充答案

【问题标题】：Changing the padding for Dojo ToolTipDialog更改 Dojo ToolTipDialog 的填充
【发布时间】：2012-02-28 00:17:43
【问题描述】：

我在网络上的任何地方都找不到答案，所以我要回答我自己的问题：如何覆盖 TooltipDialog 弹出窗口的内部填充？

挑战： 使用 dijit.TooltipDialog 时，从 Claro 样式表中为类 dijitTooltipContainer 分配了 6px 8px 8px 6px 的内部填充。我在同一页面上使用了多个工具提示，并且只想从一个中删除此填充（因此，不想覆盖默认样式表）。这个特殊的工具提示包含一个风格化的无序列表，由 0-100 以 5 为增量的右对齐数字组成，而来自 dijitTooltipContainer 的额外填充太多了。

不幸的是，以下内容不起作用，只会影响父元素（并且会弄得一团糟）：

var dialog = new dijit.TooltipDialog({
        content: string,
        style: "padding: 0;",
        id: "newDialog"
    },"");

答案：以下是我如何将内部填充更改为 0（使用 JavaScript）：

// Create the ToolTip
var dialog = new dijit.TooltipDialog({
        content: string,
        id: "newDialog"
    },"");

// Open the popup
dijit.popup.open({
    around: "someNode",
    orient: ["below"],
    popup: dialog
});

// Remove the padding from dijitTooltipContainer
  // Get our main Widget node
  var mainNode = document.getElementById("newDialog");

  // Get all the child DIV nodes created by Dojo
  var divChildren = mainNode.getElementsByTagName("div");

  // Set the element padding to zero
  // dijitTooltipContainer is the first child node
  dojo.attr(divChildren[0], "style", {padding: "0px"});

也许其他人有更好的方法来做到这一点，这很明显，我找不到。哈。

【问题讨论】：

标签： javascript css padding dojo

【解决方案1】：

当我使用 Dojo 时，我设置了一个自定义主题并同时使用 claro（或任何其他附带的）和我的自定义主题。然后我在我的自定义主题中设置任何这些覆盖。

<body class="claro myTheme">

因此，如果我想覆盖所有工具提示，我可以在我的 css 中使用它

.myTheme .dijitTooltipContainer {
    padding: 0;
}

但你只想覆盖一个，所以你可以这样做

// Create the ToolTip
var dialog = new dijit.TooltipDialog({
    content: string,
    id: "newDialog"
},"");
dojo.addClass(dialog.domNode, 'noPadding');

和css

.myTheme .noPadding .dijitTooltipContainer {
    padding: 0;
}

【讨论】：