1. Home
  2. Forum
  3. Blazor
  4. Height of blazor Scheduler control to window size

Height of blazor Scheduler control to window size

I have set the width of the SfSchedule to "100%" and that works great, I'd like the height to dynamically to scale to the window size as well and setting the height to "100%" blows out past the bottom of the window.  How do I make the scheduler dynamically size the height based on the window size and if the user changes the windows size have it react just like the width does? 

Thanks!

11 Replies 1 reply marked as answer
SK Satheesh Kumar Balasubramanian Syncfusion Team February 4, 2021 10:28 AM UTC

Hi Ben,

Greetings from Syncfusion Support..!

We have validated your reported query "Height of blazor Scheduler control to window size" at our end. We suggest you to define the height as 100% for the parent scheduler elements in your application to overcome this issue. Please find the sample in the following link.


site.css:  
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

.page, .main {
    height: 100%;
}

.content {
    padding-top: 1.1rem;
    height: 100%;
}

Kindly try the above sample and if the issue still persists at your end kindly share the below details to serve you better? 
  • Replicate the issue in the above sample
  • Share issue replicating sample if possible
  • Share schedule related code snippets
  • Share the issue depicting image/video

Regards,
Satheesh Kumar B



Marked as answer
BB Ben Becker February 6, 2021 03:23 PM UTC

Thank you for the response and example to work from.  This does indeed size the height initially to 100%, but the issue is if the user changes the height, the control does not render as expected.  

You can see here in the screenshot below highlighted in yellow that I sized the window taller after launching the sample and the schedule border did expand taller but the content within it did not.  

Is there a way to make the whole control visually expand?  It works perfectly with the width, when sizing wider or thinner, the columns shrink / expand accordingly.  Would be nice if the height would so that more of the time slots showed or maybe even rows got taller, either or.  




SK Satheesh Kumar Balasubramanian Syncfusion Team February 8, 2021 11:23 AM UTC

Hi Ben, 
  
Thanks for your update. 
  
We have validated your reported query at our end and suspect that you are using StartHour and EndHour property in your application. If we use StartHour and EndHour property, we were able to reproduce this issue. So we suggest you to use below style to overcome this issue and for the same we have prepared a sample which can be downloaded from the following link. 
  
Index.razor:   
<SfSchedule CssClass="schedule-class" TValue="AppointmentData" Height="100%" @bind-SelectedDate="@CurrentDate" StartHour="10:00" EndHour="13:00"> 
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 
</SfSchedule> 
  
<style> 
    .e-schedule.schedule-class .e-schedule-table { 
        height: 100%; 
    } 
</style> 
  
Kindly try the above sample and if the issue still persists at your end kindly share the below details to serve you better?  
  • Replicate the issue in the above sample
  • Share issue replicating sample if possible
  • Share schedule related code snippets
  • Share the issue depicting video
  
Regards, 
Satheesh Kumar B 



BB Ben Becker February 8, 2021 12:23 PM UTC

I was using the sample you attached in this post. I tried adding the additional CSS and it doesn't seem to do anything.  Are you not seeing the same thing I see when you run the sample you sent?  Just run it, then expand the height of the window, you'll observe what I sent in the prior screenshot where the contents of the control do not stretch. 

SK Satheesh Kumar Balasubramanian Syncfusion Team February 9, 2021 04:25 PM UTC

Hi Ben, 
  
Sorry for the inconvenience. 
  
We have validated your reported query and let you know that we have used the below snippets and styles to achieve your requirement. Please find the sample in the following link. 
  
site.css:   
html, body { 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    height: 100%; 
} 
  
.page, .main { 
    height: 100%; 
} 
  
.content { 
    padding-top: 1.1rem; 
    height: 100%; 
} 
  
Index.razor:    
<SfSchedule CssClass="schedule-class" TValue="AppointmentData" Height="100%" @bind-SelectedDate="@CurrentDate"> 
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 
</SfSchedule> 
  
<style> 
    .e-schedule.schedule-class .e-schedule-table { 
        height: 100%; 
    } 
</style> 
  
Kindly try the above solution and if we misunderstood your requirement, kindly share the below details to serve you better? 
  • Replicate the issue in the above sample
  • Share issue replicating sample if possible
  • Share schedule related code snippets
  • Share the issue depicting video

 
Regards, 
Satheesh Kumar B 



BB Ben Becker February 9, 2021 06:54 PM UTC

This still is not working, I made a short video to show you what I see.  When I grow the size of the window, my expectation is that the calendar control contents size accordingly.  This works when expanding / shrinking the width, but not the height, you can see it here:

https://www.screencast.com/t/lSbCW9ASX

SK Satheesh Kumar Balasubramanian Syncfusion Team February 10, 2021 10:39 AM UTC

Hi Ben, 
  
Sorry for the inconvenience. 
  
We have validated your reported query at our end. We have confirmed this as a bug and logged the defect report "Height of blazor scheduler control not expanding properly when window resize" which can be tracked from the following link. 
  
  
The issue fix for this defect will be included in our weekly patch release rolled out by the end of February 2021. We would appreciate your valuable patience until then. 
  
Regards, 
Satheesh Kumar B 



BB Ben Becker February 10, 2021 01:39 PM UTC

Awesome, thank you!

VD Vinitha Devi Murugan Syncfusion Team February 11, 2021 09:10 AM UTC

Hi Ben, 

Thanks for your update. 

You are most welcome 😊 

Regards, 
Vinitha  


ZW Zachary Witt February 23, 2021 10:28 PM UTC

This issue was supposedly resolved with v18.4.44 but I'm still having the same issue I think OP was having.

I have a vertical splitter panel, and within the top panel is a scheduler.  When I resize the splitter panel, the height of the scheduler still does not adjust.

This problem only persists with a vertical splitter panel, as with a horizontal splitter panel the scheduler reacts as expected.  See Images for example..

Attachment: SchedulerNotResizing_520033ac.zip

SK Satheesh Kumar Balasubramanian Syncfusion Team February 24, 2021 12:42 PM UTC

Hi Zachary, 
  
Thanks for your update. 
  
We have validated your reported query "When I resize the splitter panel, the height of the scheduler still does not adjust." at our end. We have modified the schedule height in splitter resizing event to resolve the reported issue. We have prepared a sample for your reference which can be downloaded from the following link.  

 
  
Index.razor: 
<SfSplitter Orientation="Syncfusion.Blazor.Layouts.Orientation.Vertical"> 
    <SplitterEvents Resizing="@ResizeStop"></SplitterEvents> 
    <SplitterPanes> 
        <SplitterPane Size="50%" Resizable="true"> 
            <div id="SchComponent"> 
                <SfSchedule TValue="ResourceData" @ref="ScheduleRef" Width="100%" Height="@ScheduleHeight" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView"> 
                 ...... 
                 ...... 
                </SfSchedule> 
            </div> 
        </SplitterPane> 
    </SplitterPanes> 
</SfSplitter> 
  
@code{ 
    SfSchedule<ResourceData> ScheduleRef; 
  
    public string ScheduleHeight { get; set; } = "300px"; 
    public void ResizeStop(ResizingEventArgs args) 
    { 
        ScheduleHeight = args.PaneSize[0].ToString(); 
        StateHasChanged(); 
    } 
} 
  
  
Kindly try the above sample and get back to us if you need further assistance. 
  
Regards, 
Satheesh Kumar B 



Loader.
Up arrow icon