关闭对话框片段控件后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容器中的包装确保关闭对话框后的重绘事件具有可处理它的控件。