Change to layout causing problem

[Richard Craig]

Somewhere between version 18.2.59 and the latest 18.3.44 an extra <div> has been added to appointments if using an eventTemplate.

Previously, there was a div with class "e-appointment-details" which we could style and was inherited inside the next div, e.g. "template-wrap"

There is now an additional <div> between these so custom styles for e-appointment-details are not being inherited.

<div class="e-appointment-details">

<div>

<div class="template-wrap">

<div class="event-status" style="background-color: rgb(255, 255, 255);"></div>

<div class="event-detail"><div class="event-subject">2:40 - Mr Nicholas MacWilson</div>

<div class="event-description">Fillings</div>

</div>

</div>

</div>

These are also present on your event template demo...

https://ej2.syncfusion.com/react/demos/#/material/schedule/event-template

[Balasubramanian Sattanathan]

Hi Richard, 

Greetings from Syncfusion Support. 

We can able to reproduce the reported issue at our end and logged the below bug report. The fix will be included in our JS2 weekly release on November 25, 2020. We appreciate your patience until then.   

  

Feedback: https://www.syncfusion.com/feedback/19074/when-we-click-on-the-work-cells-issue-in-the-resourceheader-columns-in-react   

Regards, 

Balasubramanian S 

[Richard Craig]

Hi Guys

I've updated to 18.3.51 and there's still the extra <div> when using a template.

It means the template div size can't be set as it only expands to the size of the this parent div.

The "template-wrap" div is my template.

<div class="e-appointment-details">

    <div>

        <div class="template-wrap">

            <div class="event-status" style="background-color: rgb(255, 255, 255);"></div>

            <div class="event-detail">

                <div class="event-subject">9:30 - Mr John Smith</div>

                <div class="event-description">Visit</div>

            </div>

        </div>

    </div>

</div>

[Nevitha Ravi]

Hi Richard, 

Sorry for miscommunication. 

We have resolved the reported issue “it only expands to the size of parent div” by using the below css, please refer to the following sample. 

https://stackblitz.com/edit/event-template-css?file=index.css  

.e-schedule 

  .e-vertical-view 

  .e-content-wrap 

  .e-appointment 

  .e-appointment-details { 

  display: flex; 

} 

Please try the solution and get back to us if you need any further assistance. 

Regards, 

Nevitha 

[Richard Craig]

Yes, that worked fine thanks :)

[Nevitha Ravi]

Hi Richard,  

You are most welcome, please get back to us if you need any further assistance. 

Regards, 

Nevitha