更改Dojo ToolTipDialog的填充

Changing the padding for Dojo ToolTipDialog

本文关键字：填充 ToolTipDialog Dojo 更改      更新时间：2023-09-26

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

挑战：使用dijit时。TooltipDialog有6px 8px 8px 6px的内部填充，分配给Claro样式表中的类dijitTooltipContainer。我在同一个页面上使用了几个工具提示，只想从一个页面中删除这个填充（因此，不想覆盖默认的样式表）。这个特殊的工具提示包含一个风格化的无序列表，其中包含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"});

也许其他人有更好的方法来做这件事，这是显而易见的，我找不到。哈哈。

当我使用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;
}
相关文章：