restsize for the left pane of a splitter

[Patrick Rogalski]

Hi,

I want to create a Splitter with a left and a right pane. The right pane should have a fixed size, the left pane should have the rest size of the container div (which has 100% of the width). Unfortunately I can't find an exact documentation how the PaneSize works. The API description for PaneSize Property is "specifies the panesize", this is not very helpful. Can you please give me more information or provide a simple sample.

Best regards,

Patrick

[Arun Palaniyandi]

Hi Patrick, 

Thanks for contacting Syncfusion support. 

Based on your requirement to set the fixed size for the right pane and to set the rest size for the left pane, we suggest you the set the PaneSize property for only the right pane. This is because on the total width of 100%, if we set the PaneSize as 30% for right pane means, then splitter will automatically calculate the remaining width (i.e.70%) and set it to the left pane of the splitter.  Also you don’t need to give any PaneSize to the left pane in this case. Please find the below code snippet for more reference. 

 

@Html.EJ().Splitter("Splitter").Height("280").Width("100%").Orientation(Orientation.Horizontal).PaneProperties( 

 

p => 

{ 

 

    p.Add().ContentTemplate( 

 

        @<div> 

     

          //your content 

 

        </div>).Collapsible(false); 

 

    p.Add().ContentTemplate( 

 

        @<div> 

 

           //your content  

 

        </div>).PaneSize("30%"); 

 

}) 

 

Then the output will be like below: 

 

 

 

 

 

 

 

 

Also in the shared sample, have set the collapsible property false for the left pane, so this pane will not be collapsible and only the right pane will be collapsible. So likewise we have all the other API properties like minSize, maxSize, expandable, resizable to the splitter. 

API Link: https://help.syncfusion.com/api/js/ejsplitter#members:properties 

Please find the below sample for your reference. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/SplitterMVC-231959128 

Please check the shared details and sample and let us know if you need any further assistance. 

      
Regards,
Arun P. 

 

[Patrick Rogalski]

Hi Arun,

thanks for your answer. Unfortunately it's not the behaviour that I would expect. If I resize the browser window and make the width smaller, first the content of the right pane disappears and than the right pane disappers completely. I put your sample code in a colored div to illustrate it. Below you find a picture where you can see what happens.

<div style="background-color:lightgreen; text-align:center">Width: 100%</div>

<div style="background-color:lightpink">

... your sample code here ...

</div>

Regards,

Parrick

[Arun Palaniyandi]

Hi Patrick,   

 

Thanks for your update.  

 

We have validated this issue based on your shared screenshots. This issue is because the Splitter is rendered based on the given width or its parent element width. So when the window resizes there is a change in the width and so the pane moves down and hence in order to resolve this issue, we suggest you to follow the below 2 options. 

 

Option 1: 

 

We can enable the isResponsive property to resolve this issue. please find the below code snippets 

 

 

  @Html.EJ().Splitter("Splitter").Height("280").IsResponsive(true).Orientation(Orientation.Horizontal).PaneProperties( 

 

p => 

{ 

 

    p.Add().ContentTemplate( 

 

        @<div> 

 

            <h2>Left pane</h2> 

 

 

        </div>); 

 

    p.Add().ContentTemplate( 

 

        @<div> 

            <div style="background-color:lightpink"> 

                <h2>Right pane</h2> 

 

 

                ... your sample code here ... 

 

            </div> 

 

        </div>).PaneSize("30%"); 

 

}) 

 

 

 

 

Option 2: 

 

We have to refresh the splitter on the window resize event manually. This will resolve the Splitter issue and please find the below code snippets for more reference. 

 

<script> 

 

    $(window).resize(function () { 

        var Splitterobj = $("#Splitter").ejSplitter("instance"); 

        Splitterobj.refresh(); 

    }); 

     

</script> 

  

We have also modified the previous sample as per your requirement, please find the sample location below.  

 

http://www.syncfusion.com/downloads/support/forum/137603/ze/SplitterMVc_modified-1670865835 

  

 

Please let us know, if you require any other assistance.  

 

Regards, 

Arun P. 

 

[Patrick Rogalski]

Hi Arun,

thank's for your reply. I've tested it and it seems that only the "responive" workaround is working. One solution would be enough but unfortunately it works only with size in percent - when I set the size of the right panel to a fixed value, both workarounds won't work. I've modified the project, so you can easily see, what I mean. Is there also a workaround for a fixed size?

Regards,

Patrick

Attachment: SplitterMVc_modified1670865835_33e72365.zip

[Arun Palaniyandi]

Hi Patrick,   

 

Thanks for your update.  

 

We have checked your shared sample and can replicate your issue when the isResponsive is set as px and the JS solution. After validating found that issue is not occurred in the “responsive solution fixed px” sample and instead of %, the px also worked for this case. Hence we mostly suggest you use the isResponsive option only not JS solution. The calculation of the pansize of the right pane slightly differs in this isResponsive px solution than of %, because of its initial calculation. Hence we don’t need to worry about this because the width is 100% and the pane size is used as 250px so the calculation may vary between the % and px on total 100% of the width.  

  

Please let us know if you require any other assistance.  

 

Regards, 

Arun P. 

[Patrick Rogalski]

Hi Arun,

sorry, but I have to ask again. As I understood, in your opinion the isResponsive solution works for both cases % and px? I can't confirm this. Only the responsive solution works for %, for a fixed size in px there is no solution. Neither the responsive solution nor the js solution.

Regards,

Patrick

[Selvamani Sankarappan]

Hi Patrick, 

 

Thanks for the update. 

 

We have created the support incident to track the status of this query response has been created under your account. Please log on to our support website to check for further updates. 

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents  

 

Regards, 

 

Selvamani S.