设计一个带iframe的extlib对话框

因此，我发现自己处于一个陌生的地方。在XPage中，我从扩展库中弹出一个Dialog控件。没什么特别的。现在，该对话框必须包含，这就是它变得毛茸茸的地方。设计一个带iframe的extlib对话框

该iframe拥有一些内容，所以我需要的样式，以便它足够大，以显示没有滚动条的一切。因此，我需要调整对话框以适应此。

的对话框中削减的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，无名，无阶级。我如何获得它？最终，这是我的核心关切：除非我以我认为合适的方式进行设计，否则所有其他努力都是徒劳的。

任何提示非常感谢。

感谢

来源

2016-11-19 Éric Viala

面板作为根元素添加到您的对话框，并给它的宽度和高度：

<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>

来源

2016-11-19 12:37:48

感谢。我想我被封锁了，因为我不知何故拒绝了拥有固定大小的iFrame的想法。你知道，被动的，多设备等等。现在，这不是一个明确的要求，所以我可以继续这样做。 –

设计一个带iframe的extlib对话框

回答

相关问题