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

В сноске есть кнопка, чтобы показать диалоговое окно (фрагмент), который также работает, как должен (график по-прежнему показано в фоновом режиме), НО: когда я закрываю диалог, диалоги видны только для некоторых долей секунды, а затем они исчезают! Когда вы выбираете теперь пустое пространство с отладчиком, это показывает, что div с id-графами пуст!

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

Но теперь я нахожу новый 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: Код для открытия/закрытия диалогового фрагмента. Функция «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: если я обернуваю элементы «core: 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> 

As Я понимаю решение, что упаковка в контейнере UI5 гарантирует, что событие redraw после закрытия диалогового окна имеет элемент управления, который может обрабатывать его.