We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Enable events to occupy the full height of the cell

Enable events to occupy the full height of the cell

Hello,

I'm searching to remove the blank space under events in the scheduler component.

It seems this property is what I'm searching for:

https://ej2.syncfusion.com/aspnetcore/documentation/schedule/appointments#appointments-occupying-entire-cell

But when I'm settings this property, I still have a blank space under my events :


I'm using NuGet package Syncfusion.EJ2.AspNet.Core v20.4.0.42.

How can I remove this blank space ?


5 Replies
VR Vijay Ravi Syncfusion Team January 6, 2023 11:06 AM UTC

Hi Julien


Because you enabled the rowAutoHeight property in your code, the enableMaxHeight property does not work in this combination. To remove the blank space under events when rowAutoHeight is set to true, you need to use use the ignoreWhitespace property. Refer to the below UG for more details.


UG: https://ej2.syncfusion.com/aspnetcore/documentation/schedule/row-auto-height#appointments-occupying-entire-cell


Regards,

Vijay Ravi


JG Julien Gambini January 9, 2023 09:21 AM UTC

Hello,


Thanks for your reply, after implementing ignoreWhitespace, it works for some resources, but I still have some blanks under rows that have only 1 line of events:



How can I remove these blanks ?


VR Vijay Ravi Syncfusion Team January 10, 2023 01:37 PM UTC

Hi Julien,


On our end, we enabled the rowAutoHeight and ignoreWhitespace no blank lines were produced. So we suggest that you make sure that you are using the latest styles and scripts, like those highlighted in the below code snippet. Otherwise, if you still face the issue, share the entire schedule code snippet to proceed further and how styles and scripts are referred to in your project.

[layout.cshtml]


<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>@ViewData["Title"] - ej2_core_schedule</title>

    <link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

    <link rel="stylesheet" rel='nofollow' href="~/css/site.css" asp-append-version="true" />

    <link rel="stylesheet" rel='nofollow' href="~/ej2_core_schedule.styles.css" asp-append-version="true" />

    <link rel="stylesheet" rel='nofollow' href=https://cdn.syncfusion.com/ej2/20.4.42/fluent.css />

    <script src=https://cdn.syncfusion.com/ej2/20.4.42/dist/ej2.min.js></script>

</head>


Output screenshot:


Regards,

Vijay Ravi


Attachment: ignore_whiteSpace_c0c2f6f1.zip

JG Julien Gambini January 11, 2023 04:16 PM UTC

Hi Vijay,

Your last anwser helped me to find out what was wrong with my code.

Indeed, after setting the ignoreWhitespace parameter, styles and css changed a bit for the timeline. But as I was overriding some css classes to reduce rows height, some overrided classes were missing in my code. I needed to add the following css to solve my issue:

.e-schedule .e-timeline-view.e-ignore-whitespace .e-work-cells,
.e-schedule .e-timeline-view.e-ignore-whitespace .e-resource-cells,
.e-schedule .e-timeline-view.e-ignore-whitespace .e-event-container {
    height: 32px;
}

Thank you for your support !


RV Ravikumar Venkatesan Syncfusion Team January 12, 2023 07:29 AM UTC

Julien,


We are happy that our solution helped you. Let us know if you need any further assistance on this.


Loader.
Live Chat Icon For mobile
Up arrow icon