Question

我无法在网络上的任何地方找到答案，所以我将回答我自己的问题：如何覆盖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"});

也许其他人有更好的方式做到这一点，这是显而易见的，我找不到它。哈

Answer 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;
}

更改Dojo ToolTipDialog的填充

1 个答案: