Problem horizontal splitter sized in percentage not calculating the right splitter pane with the right width

[Tim Hartog]

Hi,

I have a problem that the ejs-splitter is not always calculating the right pane with the width it should be.

i have the size of the left pane on 70% and the right pane on 30%.

On bigger displays the calculation is going right, but on smaller displays the right pane is wider than the 30% it should be. The left pane is always the right width.

Versions i am using are: Angular: 13.2.6 and ejs-splitter (layouts) 19.4.52. 

Additional screen dumps with parts of the code and the sizes show in Google Chrome are included in the uploaded PDF file.

How can I fix this? Or can I set the size of the pane dynamically from the ts file at loading time of the component?

Kind regards,

Bob 

Attachment: Problem_horizontal_splitter_when_using_percentages_255cd522.zip

[Ranjani Prabakaran]

Hi Bob,

We had forwarded your query to the concerned team and they will address you on April 7th.

Regards,

Ranjani

[Indrajith Srinivasan]

Hi Bob,

Greetings from Syncfusion support,

Query 1: “On bigger displays the calculation is going right, but on smaller displays the right pane is wider than the 30% it should be. ”

When the page has the reduced size the splitter will be resized based on the view ports width and contents will be placed inside it. We suspect the reported issue occurs, due the splitter content element which has some greater width set leads to exceed the panes width. We have also shared the ensured sample and screenshot, which is prepared using the shared information.

Sample: https://stackblitz.com/edit/angular-eax1fx?file=app%2Fapp.module.ts

Screenshot:

Can you please check the above shared sample, and let us know if it meets the issue reproducing scenario ?

Query 2: “Or can I set the size of the pane dynamically from the ts file at loading time of the component”

You can change the size of the pane’s by using the splitter Instance, accessing the component’s paneSettings size property for the respective panes. Since the last pane is a flexible pane, based in the size set for the first pane(two pane splitter) remaining size is occupied by the last pane.

Check the below shared code blocks and above shared sample for reference.

 

    public onCreated(args): void { 

        this.splitterObj.paneSettings[0].size = '40%';

    }

 

Regards,

Indrajith

[Tim Hartog]

Hi Indrajith,

Your example is exactly what happens.

The grid is wider than the pane it is placed into.

In previous versions of Angular/Syncfusion we did not have this problem.

The grid resized to the pane it was into and we saw the vertical scrollbar.

With the latest release we don't see the vertical scrollbar anymore because the right pane is wider than the browser allows and the vertical scrollbar of the grid falls outside the scope of the browser.

So I hope you can provide me with a solution or workaround so I can make this visible again.

Kind regards,

Bob

[Indrajith Srinivasan]

As mentioned in the last update for query 2, the last pane is a flexible pane the remaining size which is left is set for the last pane. With the shared PDF images, we suspect the resolution of the page is lower since the screenshot images are not so clear. Also, we have switched to few older versions, and the behavior is common in the splitter with the window resize action.

• Can you please share us a video demo, replicating the reported issue with the latest version?

Also, can you check the reported issue with the 100% browser resolution ?

The above details will be helpful for us to understand the issue further and assist you better,

[Tim Hartog]

Hi Indrajith,

I found a workaround to fix my problem. With renderer2 if get the actual browser width both at opening as resizing.

Based on the outcome of this size I am setting the width of the tab object in the right splitter pane dynamically. The grids that are placed under the tab object automatically resizes to this width and the vertical scrollbars are visible.

You asked to check the browser resolution, but the problem occurs when this is at 100%. We don't zoom in or out with the browser.

Regards,

Bob

[Buvana Sathasivam]

Thank you for your update. Please get back to us if you need any further assistance.