Question

所以，我发现自己处在一个陌生的地方。在XPage中，我从扩展库中弹出一个Dialog控件。没什么特别的。现在，该对话框必须包含<iframe>以及它变得毛茸茸的地方。

iframe拥有一些内容，所以我需要设置它的样式，以便它足够大，无需滚动条即可显示所有内容。因此，我需要调整Dialog的大小以适应这种情况。

对话框的简化html如下：

<div
    class="dijitDialog dijitDialogFocused dijitFocused"
    role="dialog"
    ...
    style="position: absolute; left: 624px; top: 250px; opacity: 1; z-index: 950;"
    >
    <div ... class="dijitDialogTitleBar"...>
        ...
    </div>
    <div class="dijitDialogPaneContent" style="width: auto; height: auto;">
        <div id="view:_id1:dialogEditPerson:_content">
            <form id="view:_id1:dialogEditPerson:_content:form1" method="post" action="..." class="xspForm"...>
                <div ...>
                    <iframe ... src="..."></iframe>
                </div>
            </form>
        </div>
    </div>
</div>

到目前为止，dijitDialogEtc类来自tundra.css，开箱即用。我想我会在自己的.css

中重载它们

现在我对某些特征感到有些困惑：

内联样式，特别是高度和宽度来自哪里？我该怎样对他们采取行动？
<div class="dijitDialogPaneContent" ...内是另一个div，无名，无类别。我怎么抓住它？最终，这是我的核心问题：直到我按照我认为合适的方式设计它，所有其他努力都是徒劳的。

任何提示都非常赞赏。

由于

Answer 1

将一个面板作为根元素添加到对话框中，并为其指定宽度和高度：

<xe:dialog
    id="dialog1">
    <xp:panel
        style="width:500px;height:300px">
        ... your elements like iframe ...
    </xp:panel>
</xe:dialog>

根据您的内容大小自动计算对话框的大小。在这种情况下，它是具有给定大小的面板。

如果iframe是对话框的唯一内容，那么您可以将大小设置为iframe本身：

<xe:dialog
    id="dialog1">
        <iframe style="width:500px;height:300px" src="http://..." />
</xe:dialog>

使用iframe为extlib Dialog设置样式

1 个答案: