The component on a dialog doesn't get attached to until clicked

[Naveen Davuluri]

I have 2 components on a dialog box one a grid and the other a scheduler. The scheduler shows up on the main html page and doesn't disappear until i click on the dialog which then gets attached to and disappears from main html page.

Attachment: calendar_dce5506a.zip

[Vijay Ravi]

Hi Naveen Davuluri,
 

To ensure that the Scheduler component is displayed exclusively within the dialog and does not appear on the main HTML page, it is recommended to initially set its CSS display property to "none". The Scheduler should then be shown programmatically when the dialog is opened. This approach guarantees that the component remains hidden until it is needed, providing a seamless user experience.

[index.html]
 

 

<div id="maindiv" class="container-fluid">

    <div id="modalDialog">

      <div id="Grid">

      </div>

    </div>

    <div id="ptwDialogModalDiv">

      <div id="permittab"></div>

    </div>

    <div id="ptwGridDiv">

    </div>

    <div id="scheduleComponent" style="display: none;"></div>

    </div>

    <div id="Schedule" style="height: 100%;"></div>

  </div>

Sample link: https://stackblitz.com/edit/rhudkt-jfjetv?file=index.html

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay