ダイアログのフラグメントコントロールを閉じた後に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 "されている要素を示すために使用されています/また、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> 
    <!-- ... --> 

は、それが（グラフィックスがまだ示されなければならないとしても働くダイアログ（フラグメント）を表示するためのボタンでありますバックグラウンドで）しかし、ダイアログを閉じると、ダイアログはほんの数分の1秒間しか表示されず、消えます！デバッガで空の領域を選択すると、idが "graphs"のdivが空であることがわかります！ダイアログの断片を閉じる/オープニングのためにコード：

<div id="__xmlview1--graphs" style="border: 1px solid lightgray; border-image: none; width: 100%; height: 89%; background-color: white;"></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後に新しいdiv要素を見つけます。 "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を防ぐ方法がありません。助けてください。事前に感謝します

EDIT 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コンテナのラッピングが、ダイアログを閉じた後の再描画イベントがそれを処理できるコントロールを持っていることを確認するソリューションを理解しています。