Splitter showing empty space for grid in upper pane

[m4yorga]

Description

The ignite Splitter is showing empty space when there's a grid in the upper pane, happening in v13.1.0, the issue is not present in v12.2.3 though

• igniteui-angular version: 13.1.0
• browser: Microsoft Edge Version 99.0.1150.55 (Official build) (64-bit)

Steps to reproduce

1. Open this stackblitz
2. Since the initial load, you can see that the upper splitter pane is displaying the grid with empty space in the middle, just above the grid’s footer (in blue color)
3. Manually change the size of the upper pane by dragging and dropping the pane’s edge, you will see that the empty blue space goes away
4. The splitter bar that separates panes has 2 small arrows on the sides to immediately expand/collapse the panes, please click them in the following order: UP arrow, DOWN arrow, DOWN arrow, UP arrow. You will see that the blue space is displayed again in the upper pane

These steps are also recorded here:

This issue doesn’t happen in v12.2.3, you can follow the same steps in this stackblitz

Result

The grid shows an empty space just above the grid's footer

Expected result

Grid's contents should not be cropped, in other words, there should not be empty space above the grid's footer

[mddragnev]

Hello @m4yorga, I found out that the issue is because of the flex style and flex-grow of the panes and because that the grid is auto-sizing wrongly. I am investigating this further but for now I am proposing a workaround. It requires to set specific pane sizes. If that is not a problem for your scenario you can try the following: Set the size property of each pane like this:

 <igx-splitter-pane style="background-color: cyan" size="50%">

Then, get the splitter element in the typescript file (using ViewChild or so) and on AfterViewInit hook write the following:

this.splitter.panes.forEach(pane => {
            pane.collapsedChange.subscribe(e => {
                pane.size = '50%';
            });
        });

What this do is to subscribe for collapse or expand events in the pane and set the size respectively. Here is your sample with my changes: stackblitz. Please let me know if you have any questions.

[m4yorga]

Thanks @mddragnev , I applied your suggested work-around with a minor tweak to work with my business requirement. I confirm it works for now. Thanks again, regards.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[m4yorga]

Hello @mddragnev , was there a definite fix implemented for this issue?

If so, could you please let me know the version number on which it's available?

Thanks

[mddragnev]

Hello @m4yorga,

The issue is still not fixed. You can continue using the workaround and I will ping you once there is a version with the fix. We are still loking at the best way to handle it. I have tried to handle it in the splitter but it happens to be not the best fix and we dropped that approach.

Regards

[m4yorga]

Ok thanks @mddragnev

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.