設計一個帶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對話框

回答

相關問題