Question

我有一个对话框，其中包含label和ValidationTextBoxs的分组，这些分组以编程方式添加到对话框中。例如：名字：XXXXXX

如果我指定没有css格式化标签，ValidationTextBox会很好地并排出现。但是这些分组在没有间距的情况下相互挤压。

如果我为高度，边距，填充添加添加css。第一个分组很好，但是以下标签从当前ValidationTextBox的开头处开始。不是在下一行的开始。所以对齐完全没有了。

是的，我已尝试单独更改标签和文本框的高度，填充和边距。在行尾没有运气。我想过将分组包装在跨度或div中但是得到相同的行为并设置封闭div / span的大小。但没有运气。

有人可以解释为什么以下功能

function buildDialogField(fieldHolder, id, title, value, widgetId)
{
    var newLabel, newField;
    if (value === null) {
        value = "";
    }

    newLabel = "<div class='datadiv'><label for='" + id + "'>" + title + ":</label>";
    dojo.place(newLabel, fieldHolder);
    newField = new dijit.form.ValidationTextBox({
        id: widgetId,
        name: "myData",
        value: value,
        trim: true
    });
    dojo.place(newField.domNode, fieldHolder);
    dojo.place("</div>", fieldHolder);
}

生成以下HTML

<div class='datadiv'>
    <label for='name'>me:</label>
</div>
<div id="widget_305" class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox dijitValidationTextBox" wairole="presentation" role="presentation" widgetid="305">

结尾div出现在标签之后但出现在ValidationTextBox之前。虽然那不是我编码的！

感谢任何帮助我解决困惑的人。

Answer 1

您向dojo.place发送了无效/不完整的HTML，而它（或浏览器）正在为您“完成”。 dojo.place不仅仅是elem.innerHTML += "..."的别名，但您似乎也是这样对待它。

我认为修复此代码实际上应该是微不足道的：

newLabel = "<div class='datadiv'><label for='" + id + "'>" + title + ":</label></div>";
dojo.place(newLabel, fieldHolder);
newField = new dijit.form.ValidationTextBox({
    id: widgetId,
    name: "myData",
    value: value,
    trim: true
});
// the following is equivalent to dojo.place(newField.domNode, newLabel)
newField.placeAt(newLabel);

解释。 newLabel变量最终接收从传递给dojo.place的HTML内容生成的生成的顶级DOM节点。（注意我通过添加结尾</div>来完成HTML字符串。）在这种情况下，实际上是div，而不是label - 所以您可能想要更改变量名。 / p>

然后，我们将小部件放在中的div - 默认情况下，placeAt将小部件放置为指定节点的最后一个子节点（就像默认情况下dojo.place(nodeToBePlaced, targetNode)一样）。

您可以通过传递其他参数来告知它 - 有关详细信息，请参阅http://dojotoolkit.org/api/dijit/_Widget/placeAt和http://dojotoolkit.org/api/dojo/place。

css样式dojo对话框

1 个答案: