How do I get my sfSplitter to fill 100% of the containing div?

Question

I must be missing something here about how Height works in your Blazor components. If I set Height to 100% it does not stretch to fill the container. I've tried flex and simple css to try to make it work but it does not. The only thing that works is to give the splitter a fixed height in pixels, which is not a great solution. I need something dynamic that sizes proportionally to the viewport. If I recall correctly, I've had this same issue with your other components. I'm new to Blazor, but not CSS.

My goal is to have the splitter occupy 100% of the available height of the div at all times. When I set the splitter Height to 100%, I expect it to fill the div. It does not. It simply takes as much space as it needs to render its content, whether that is 1/10th of the height or 2x the height of the page. Width works as expected. Height does not.

Revanth Krishnan · Answer

Hi Stephen, Greetings from Syncfusion support. We have validated your query “How do I get my SfSplitter to fill 100% of the containing div? Setting the Height to 100% doesn’t work.” We tried to reproduce the issue by setting the ‘Height’ property to 100%, but we couldn’t reproduce the issue from our end, and the splitter height is correctly filled within the container element. We have prepared a sample for your reference, Code Snippet:

. . .

Note: The height of the container should be set properly for the Splitter to fill the content. Sample: https://www.syncfusion.com/downloads/support/forum/163363/ze/Splitter_Blazor_Application-243857143 If the issue still occurs please share us with the following details, Code snippet of the splitter with the container. Package version used in the application. If possible please share the issue reproducible sample or please modify the shared sample with the issue reproducing steps. The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. Regards, Revanth

Stephen · Answer

Sure. The problem with your solution is that you are still showing a pixel height in your css for splitter-container of 300px. I need it to fill the available space via splitter-container of 100%. I don't know the pixel height of the user's browser. See the two screen caps below. The first is when the container is set to 100% and sfSplitter to 100%. The second is your solution, which doesn't work for me because you still used a fixed pixel height in the container. I've posted the non-working code below that.non working code see image 1@page "/splitter-test"@using Syncfusion.Blazor.Layouts@using Syncfusion.Blazor.Navigations@using System.ComponentModel@using SRTrader.Client.Services@using System.Collections.ObjectModel@using System.Collections.Specialized@inject NavigationManager NavigationManager

Some content Some other content Some expandable footer

Revanth Krishnan · Answer

Hi Stephen, Good day to you. We have further validated your query “When setting the splitter container height as 100% the solution the issue is not resolved”. This is not an issue, when setting the splitter-container as 100% the height of the parent is inherited where the parent element with class content have height as auto by default. But your can be achieved by setting the height for the parent element with class content as “calc(100% - 6.5rem);” where the 6.5 rem is the height of the top panel element. We have prepared a sample for your reference, Code Snippet:

. . .

Sample: https://www.syncfusion.com/downloads/support/forum/163363/ze/Splitter_Blazor_Application1450149958 Please check the above code snippet and the sample and let us know if it satisfies your requirement. Regards, Revanth

Stephen · Answer

I tried it on my code. It is still not working as expected. When one of the sfPanels fills with data, it pushes everything below it off the screen. What I expect is that the bottom panel of the splitter will stay at the bottom of the visible screen (i.e. not be pushed off the screen - and not move at all) and the top sfPanel will retain its dimensions and simply add scroll bars to itself if it needs to handle more content than it has space to show. In this case the user would need to scroll within the sfPanel to see that extra data. I do not want any part of the sfSplitter to be pushed off the screen.

Just so my question isn't confusing - what I am looking for is a splitter where the height is the size of the available visible space. If I set the splitter Height="900px" it works, but that won't be a good experience if someone has a higher or lower resolution screen or if they resize the browser.

I appreciate the advice you are providing. Perhaps I'm not remembering how the 100% attribute is meant to work in CSS and in your components.

Stephen · Answer

I figured out an acceptable solution. While % height did not behave as I expected, switching to vh units did work as expected. I set the container to, in my case, 88vh.

DAN · Answer

hello stephen,can you please provide the code which you used and  it is working as i am trying to achieve the same you did.

Revanth Krishnan · Answer

Hi Stephen, 
 
We are glad that the reported issue had been resolved from your end. 
Please let us know if you need any further assistance. 
 
Regards, 
Revanth