EJ2 Outlook Sample

[Washington Morais]

Hi, I'm trying to use the Outlook sample from Github (link) inside a container, but the result is messy.

What do I have to change to accomplish this?

[LeoLavanya Dhanaraj]

Hi Washington,

Greetings from Syncfusion support.

To meet your requirement, you will need to render the header, content, and footer sections in separate div’s inside the overall container. In order to properly compute the height for these sections, you will need to assume that the height of the overall div container is 100%.

To help you get started, we have included some code snippets and a sample with an output screenshot for your reference. You can find the sample at the following link:

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/JS-Outlook-620831390.zip

[index.html]

<div id="Template" style="height:100%;border: 2px solid red;padding:5px">

    <div id="HeaderTemplate" style="height:10%;border: 1px solid #0073DC ;">

        <h3>Site Header - Navigation Menu</h3>

    </div>

    <div id="outlookTemplate" style="height:80%;border: 1px solid #0073DC;padding:5px;">

        <div class='outlook-container'>

            ...

        </div>

    </div>

    <div id="FooterTemplate" style="height:10%;border: 1px solid #0073DC;">

        <h3> Site Footer</h3>

    </div>

</div>

Output screenshot:

Regards,

Leo Lavanya Dhanaraj