Dialog inside vertical Splitter

[Tanner]

I'm trying to put a dialog inside of a vertical splitter, but it's not rendering correctly.

No matter what css/styling I put on the dialog, it doesn't help.

Below is the splitter with a dialog inside (Schedule). The border of the dialog is green. I'm wanting the dialog to be the same width/height as the splitter pane, even when resizing the splitter.

[Revanth Krishnan]

Hi Tanner, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “When rendering the dialog inside the splitter, I want the dialog height and the width of the dialog same as the splitter even when resizing”. 

 

This can be achieved by the following steps, 

• First set the `target` property of the dialog to be the element inside the splitter pane.
• Then setting the `height` property of the dialog to be 100%.
• To change the dialog height dynamically, bind the `resizing` event of the splitter.
• The dialog `height` property can be set by calculating the height of the splitter pane in which the dialog is rendered.
• Then call the `refreshPosition` public method of the dialog to refresh the position properly inside the splitter.

 

We have also prepared a sample for your reference, 

 

Code Snippet: 

 

<div id="vertical"> 

    <div class="splitter-default-content"> 

      <span>Top pane <div id="panetext">size: 30%</div><div id="panetext">min: 60px</div></span> 

    </div> 

    <div class="splitter-default-content secondPane"> 

      <div id="dialog"></div> 

    </div> 

    <div class="splitter-default-content"> 

      <span>Bottom pane<div id="panetext">size: 30%</div><div id="panetext">min: 60px</div></span> 

    </div> 

  </div> 

</div> 

 

let splitObj: Splitter = new Splitter({ 

  . . . 

  orientation: "Vertical", 

  resizing: resizeEvent, 

}); 

splitObj.appendTo("#vertical"); 

 

let dialog = new Dialog({ 

  target: document.querySelector(".secondPane") as HTMLElement, 

  width: "100%", 

  height: "100%" 

}); 

dialog.appendTo("#dialog"); 

 

function resizeEvent() { 

  var middlePaneSize = splitObj.element.querySelectorAll(".e-pane")[1].getBoundingClientRect().height; 

  dialog.height = middlePaneSize.toString() + "px"; 

  dialog.refreshPosition(); 

} 

 

Sample: https://stackblitz.com/edit/vbkcp7-ud6zxa?file=index.ts 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth