svg - OpenUI5 after closing dialog fragment controls disappear -

i´m pretty new ui5 , don´t understand why controls disappear. let me explain problem step-by-step

i have created view, corresponding controller , custom graphic control using d3. troubling part of view looks that:

<page ...>     <!-- 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>        <!-- closing elements follow here... --> 

if wonders try above: svg-elements holding graphics , surrounding 'core:html' element used showing/hiding charts via jquery (not allowed see everything. in addition 3 graphics should use full remaining space on page (the graphics scaling) not used filter (flexboxes above), header , footer.

until works expected. means graphics drawn , looks alright far. want show legend graphics (which color means , on). have accomplished showing dialog fragment

dialog definition:

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

in footer button show dialog (fragment) works should (the graphics still shown in background), but: when close dialog dialogs visible fractions of second , disappear! when select empty space debugger shows div id "graphs" empty!

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

but find new div after content div holds graphics

<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: code opening/closing dialog fragment. "onshowlegend" function shows dialog, "legendclose" function called when click close button on dialog.

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

i don´t have clue how prevent ui5 hide graphics. please help. in advance

edit 2: if wrap "core:html" elements e.g. in verticallayout graphics not removed after closing dialog. but: height of verticallayout can´t set. need uses full height of unused page, because graphics scaling depending on parent control height.

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

best regards jochen

after hours of trial , error , lot of internet surfing have come following code want

<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 view here... --> </html:div> 

as understand solution wrapping in ui5 container makes sure redraw event after closing dialog has control can handle it.