CustomEvent image to #eventSettingsTemplate

[Arturo Martinez]

I added a custom image to my events via '#eventSettingsTemplate' how ever i cannot make the image to be using a grid like style in which its two rows height and my other two divs are in each row like this:

+----------+|+---------------------+

|               | Name.               |

|  [IMG]    |+------------------- +

|                | Total                |

+-----------+  +--------------------+

But im not able to make the image fill the two divs, it always just fill the 'Total' one, or it wont show'
How can i make this using scss? or change it my template can you guide me?

.image {

width: 21px;

height: 21px;

background-size: 45px;

background-repeat: no-repeat;

}

[Saritha Sankar]

Hi Arturo Martinez,

You can achieve the requirement of displaying the event template using CSS.  Please refer to the below CSS style and sample for your reference:
 

 

.schedule-event-template.e-schedule .e-vertical-view .e-content-wrap .e-appointment .e-appointment-details {

  padding: 0;

  height: 100%;

}

.schedule-event-template.e-schedule .e-timeline-view .e-appointment .e-appointment-details {

  padding: 0;

  height: 100%;

  width: 100%;

}

.custom-event-template {

  display: grid;

  grid-template-columns: auto 1fr;

  grid-template-rows: 1fr 1fr;

  width: 100%;

  height: 100%;

  align-items: center;

}

.image-container {

  width: 25px;

  grid-row: 1 / span 2;

  grid-column: 1;

  display: flex;

  align-items: center; 

  justify-content: center;

}

.image-container img {

  max-width: 100%;

  height: 100%;

}

.text-container {

  grid-row: span 2;

  grid-column: 2;

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}

.name {

  grid-row: 1;

  grid-column: 2;

  display: flex;

  align-items: center;

  height: 100%;

  padding-left: 10px;

}

.total {

  grid-row: 2;

  grid-column: 2;

  display: flex;

  align-items: center;

  height: 100%;

  padding-left: 10px;

}

Sample Link: https://stackblitz.com/edit/angular-k4gnwyfz-btflad54?file=src%2Fapp.component.css




If you are still facing any issue, we would need additional details to replicate the exact problem on our end. We kindly request you to provide the following details, as this information will greatly assist us in understanding and resolving the issue effectively.

• Provide a simple sample that replicates the issue or is replicated in our shared samples.

Please let us know if you need any further assistance. 

Regards,

Saritha S.