關閉對話框片段控件後OpenUI5消失

Question

我很新的UI5，我不明白爲什麼我的控件消失。但讓我一步一步解釋問題

我已經創建了一個視圖，相應的控制器和使用D3的自定義圖形控件。 視圖的令人不安的部分看起來像這樣：

<Page ...> 
    <!-- some FlexBoxes here... --> 
    <html:div style="clear:both; overflow-x:hidden; overflow-y:hidden; height: 94%;" class="sapUiNoMargin"> 
     <html:div id="graphs" style="background-color:white; border: 1px solid lightgray; height:89%; width:100%;" > 
      <core:HTML id="htmlCanvasWrapper" content="&lt;svg id='htmlCanvas' height='65%'&gt;&lt;/svg&gt;"></core:HTML> 
      <core:HTML id="htmlCanvas2Wrapper" content="&lt;svg id='htmlCanvas2' height='23%'&gt;&lt;/svg&gt;"></core:HTML> 
      <core:HTML id="htmlCanvas3Wrapper" content="&lt;svg id='htmlCanvas3' height='12%'&gt;&lt;/svg&gt;"></core:HTML> 
     </html:div> 
     <!-- the closing elements follow here... --> 

如果有人想知道什麼，我嘗試了上述的事：在SVG元素都抱着我的顯卡和周圍的核心：HTML「元素被用於顯示/通過jQuery隱藏圖表（不是每個人都可以看到所有內容，另外3個圖形應該使用頁面上的剩餘空間（圖形縮放），而不是過濾器（上面的FlexBoxes）使用的頁眉和頁腳

到目前爲止，一切都按預期工作，這意味着繪製的圖形和一切看起來都很好 現在我想顯示圖形的圖例（哪種顏色意味着什麼等）。我已經通過展示從片段的對話來完成

對話框定義：

<core:FragmentDefinition xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core"> 
    <Dialog title="{i18n>VollePfanneLegende.Title}"> 
     <html:style> 
     <!-- style definitions for the legend --> 
    </html:style> 
    <l:VerticalLayout> 
     <l:content> 
      <FlexBox> 
       <html:div class="icon" style="background-color: #68ACE9; border-color: #68ACE9; border-radius: 50%;"/> 
       <html:div class="hspacer"/> 
       <Text text="{i18n>VollePfanneLegende.IstTemp}"/> 
      </FlexBox> 

      <html:div class="vspacer"/> 

      <FlexBox> 
       <html:div class="icon" style="background-color: #F70206; border-color: #F70206; border-radius: 50%;"/> 
       <html:div class="hspacer"/> 
       <Text text="{i18n>VollePfanneLegende.SollTemp}"/> 
      </FlexBox> 
    <!-- ... --> 

在頁腳是一個按鈕來顯示對話框（片段），這也適用，因爲它應該（圖形仍顯示但是：當我關閉對話框時，對話框只能在幾分之一秒內看到，然後消失！當使用調試器選擇現在空的空間時，它顯示ID爲「圖形」的div是空的！

<div id="__xmlview1--graphs" style="border: 1px solid lightgray; border-image: none; width: 100%; height: 89%; background-color: white;"></div> 

但現在我發現一個新的div保存我的圖形

<div class="sapUiHidden sapUiForcedHidden" id="sap-ui-preserve" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden;"> 
    <svg id="htmlCanvas" height="65%" data-sap-ui-preserve="__xmlview1--htmlCanvasWrapper>...</svg> 
    <svg id="htmlCanvas2" height="23%" data-sap-ui-preserve="__xmlview1--htmlCanvas2Wrapper>...</svg> 
    <svg id="htmlCanvas3" height="12%" data-sap-ui-preserve="__xmlview1--htmlCanvas3Wrapper>...</svg> 
</div> 

EDIT1內容DIV AFTER：/代碼用於打開關閉對話片段。 「onShowLegend」函數顯示對話框，當您單擊對話框上的關閉按鈕時，會調用「legendClose」函數。

onShowLegend: function() { 
    if (! this._oLegendDialog) { 
     this._oLegendDialog = sap.ui.xmlfragment("portal.view.vollePfanneLegende", this); 
    } 

    // toggle compact style 
    this.getView().addDependent(this._oLegendDialog); 
    jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oLegendDialog); 
    this._oLegendDialog.open(); 
}, 

legendClose: function() { 
    if (this._oLegendDialog) { 
     this._oLegendDialog.destroy(); 
    } 
    this._oLegendDialog=null; 
} 

我不有一個線索如何防止UI5隱藏我的圖形。請幫忙。在此先感謝

編輯2：如果我包裝「核心：HTML」元素，例如在VerticalLayout中，關閉對話框後不會刪除圖形。但是：VerticalLayout的高度不能設置。我需要使用未使用頁面的全部高度，因爲圖形根據其父控制高度進行縮放。

<html:div id="graphs" style="background-color:white; border: 1px solid lightgray; height:89%; width:100%;" > 
    <l:VerticalLayout width="100%"> 
     <l:content> 
      <core:HTML id="htmlCanvasWrapper" content="&lt;svg id='htmlCanvas' height='65%'&gt;&lt;/svg&gt;"></core:HTML> 
      <core:HTML id="htmlCanvas2Wrapper" content="&lt;svg id='htmlCanvas2' height='23%'&gt;&lt;/svg&gt;"></core:HTML> 
      <core:HTML id="htmlCanvas3Wrapper" content="&lt;svg id='htmlCanvas3' height='12%'&gt;&lt;/svg&gt;"></core:HTML> 
     </l:content> 
    </l:VerticalLayout> 
</html:div> 

問候 約亨

Answer 1

試錯和大量的網上衝浪的幾個小時後，我想出了下面的代碼，不正是我想要

<html:div style="clear:both; overflow-x:hidden; overflow-y:hidden; height: 94%;" class="sapUiNoMargin"> 
    <html:style> 
     .graphs { 
       background-color:white; 
       border: 1px solid lightgray; 
       width:100%; 
       height: calc(100% - 85px); /* Height of RangeSlider area */ 
     } 
     .sapMScrollContScroll { 
      height: 100%; 
     } 
    </html:style> 
    <html:div id="graphs" class="graphs"> 
     <ScrollContainer width="100%" height="100%" focusable="false" horizontal="false"> 
      <core:HTML id="htmlCanvasWrapper" content="&lt;svg id='htmlCanvas' height='65%'&gt;&lt;/svg&gt;"></core:HTML> 
      <core:HTML id="htmlCanvas2Wrapper" content="&lt;svg id='htmlCanvas2' height='23%'&gt;&lt;/svg&gt;"></core:HTML> 
      <core:HTML id="htmlCanvas3Wrapper" content="&lt;svg id='htmlCanvas3' height='12%'&gt;&lt;/svg&gt;"></core:HTML> 
     </ScrollContainer> 
    </html:div> 

    <!-- Rest of the view here... --> 
</html:div> 

由於我瞭解解決方案，UI5容器中的包裝確保關閉對話框後的重繪事件具有可處理它的控件。