Skip to content

fix(splitter): preserve pane sizes after collapse - 21.2.x #17555

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
viktorkombov wants to merge 2 commits into
base: 21.2.x
Choose a base branch
from
+147 −30
Open

fix(splitter): preserve pane sizes after collapse - 21.2.x #17555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8d4cbcb
fix(splitter): preserve pane sizes after collapse
viktorkombov Aug 31, 2026
2611ac1
chore(*): fix failing test
viktorkombov Aug 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 30 additions & 14 deletions projects/igniteui-angular/splitter/src/splitter/splitter-pane/splitter-pane.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,13 @@ export class IgxSplitterPaneComponent {
public maxHeight = '100%';

/** @hidden @internal */
public owner;
public get owner() {
return this._owner;
}
public set owner(value) {
this._owner = value;
this.refreshFlex();
}

/**
* Gets/Sets the size of the current pane.
Expand All @@ -166,7 +172,7 @@ export class IgxSplitterPaneComponent {

public set size(value) {
this._size = value;
this.el.nativeElement.style.flex = this.flex;
this.refreshFlex();
}

/** @hidden @internal */
Expand All @@ -180,7 +186,7 @@ export class IgxSplitterPaneComponent {
}
public set dragSize(val) {
this._dragSize = val;
this.el.nativeElement.style.flex = this.flex;
this.refreshFlex();
}

/**
Expand All @@ -199,7 +205,7 @@ export class IgxSplitterPaneComponent {
@HostBinding('style.flex')
public get flex() {
const size = this.dragSize || this.size;
const grow = this.isPercentageSize && !this.dragSize ? 1 : 0;
const grow = (this.isPercentageSize || this.hasCollapsedSibling) && !this.dragSize ? 1 : 0;
return `${grow} ${grow} ${size}`;
}

Expand All @@ -213,15 +219,11 @@ export class IgxSplitterPaneComponent {
*/
@Input({ transform: booleanAttribute })
public set collapsed(value) {
if (this.owner) {
// reset sibling sizes when pane collapse state changes.
this._getSiblings().forEach(sibling => {
sibling.size = 'auto'
sibling.dragSize = null;
});
}
this._collapsed = value;
this.display = this._collapsed ? 'none' : 'flex';
if (this.owner) {
this._getSiblings().forEach(sibling => sibling.resetDragSize());
}
this.collapsedChange.emit(this._collapsed);
}

Expand All @@ -232,6 +234,7 @@ export class IgxSplitterPaneComponent {
private _size = 'auto';
private _dragSize;
private _collapsed = false;
private _owner: any;

/**
* Toggles the collapsed state of the pane.
Expand All @@ -245,11 +248,24 @@ export class IgxSplitterPaneComponent {
this.collapsed = !this.collapsed;
}

private refreshFlex() {
this.el.nativeElement.style.flex = this.flex;
}

private resetDragSize() {
this._dragSize = null;
this.refreshFlex();
}

private get hasCollapsedSibling() {
return this.owner ? this._getSiblings().some(sibling => sibling.collapsed) : false;
}

/** @hidden @internal */
private _getSiblings() {
const panes = this.owner.panes.toArray();
private _getSiblings(): IgxSplitterPaneComponent[] {
const panes: IgxSplitterPaneComponent[] = this.owner.panes.toArray();
const index = panes.indexOf(this);
const siblings = [];
const siblings: IgxSplitterPaneComponent[] = [];
if (index !== 0) {
siblings.push(panes[index - 1]);
}
Expand Down
129 changes: 117 additions & 12 deletions projects/igniteui-angular/splitter/src/splitter/splitter.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,76 @@ describe('IgxSplitter', () => {
expect(pane2.collapsed).toBeFalsy();
});

it('should preserve horizontal pane sizes after collapse and expand', () => {
const [pane1, pane2] = splitter.panes.toArray();
const splitterBar = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).componentInstance;
pane1.size = '30%';
pane2.size = '70%';
fixture.detectChanges();

const pane1Width = pane1.element.offsetWidth;
const pane2Width = pane2.element.offsetWidth;

splitterBar.onCollapsing(false);
fixture.detectChanges();
splitterBar.onCollapsing(false);
fixture.detectChanges();

expect(pane1.size).toBe('30%');
expect(pane2.size).toBe('70%');
expect(pane1.element.offsetWidth).toBe(pane1Width);
expect(pane2.element.offsetWidth).toBe(pane2Width);
});

it('should preserve vertical pane sizes after collapse and expand', () => {
fixture.componentInstance.type = SplitterType.Vertical;
fixture.detectChanges();

const [pane1, pane2] = splitter.panes.toArray();
const splitterBar = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).componentInstance;
pane1.element.parentElement.style.height = '600px';
pane1.size = '30%';
pane2.size = '70%';
fixture.detectChanges();

const pane1Height = pane1.element.offsetHeight;
const pane2Height = pane2.element.offsetHeight;

splitterBar.onCollapsing(false);
fixture.detectChanges();
splitterBar.onCollapsing(false);
fixture.detectChanges();

expect(pane1.size).toBe('30%');
expect(pane2.size).toBe('70%');
expect(pane1.element.offsetHeight).toBe(pane1Height);
expect(pane2.element.offsetHeight).toBe(pane2Height);
});

it('should let a fixed-size pane fill space without losing its configured size', () => {
const [pane1, pane2] = splitter.panes.toArray();
const splitterBar = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).componentInstance;
pane1.element.parentElement.style.width = '600px';
pane1.size = '100px';
pane2.size = '100px';
fixture.detectChanges();

const pane1Width = pane1.element.offsetWidth;
const pane2Width = pane2.element.offsetWidth;

splitterBar.onCollapsing(false);
fixture.detectChanges();

expect(pane2.size).toBe('100px');
expect(pane2.element.offsetWidth).toBeGreaterThan(pane2Width);

splitterBar.onCollapsing(false);
fixture.detectChanges();

expect(pane1.element.offsetWidth).toBe(pane1Width);
expect(pane2.element.offsetWidth).toBe(pane2Width);
});

it('should allow resize in % when pane size is auto.', () => {
const pane1 = splitter.panes.toArray()[0];
const pane2 = splitter.panes.toArray()[1];
Expand Down Expand Up @@ -449,21 +519,52 @@ describe('IgxSplitter pane collapse', () => {
splitter = fixture.componentInstance.splitter;
}));

it('should reset sizes when pane is initially collapsed.', () => {
it('should preserve sizes and constraints when pane is initially collapsed.', () => {
const panes = splitter.panes.toArray();
panes.forEach(pane => {
expect(pane.size).toBe('auto');
});
expect(panes.map(pane => pane.size)).toEqual(['30%', '30%', '30%']);
expect(panes.map(pane => pane.minWidth)).toEqual(['10%', '20%', '5%']);
expect(panes.map(pane => pane.maxWidth)).toEqual(['40%', '50%', '35%']);
expect(panes[2].collapsed).toBeTrue();
expect(panes[2].display).toBe('none');
});

it('should let an initially fixed-size sibling fill space and restore its size', async () => {
const fixedFixture = TestBed.createComponent(SplitterCollapsedPaneComponent);
fixedFixture.componentInstance.paneSizes = ['100px', '100px', '100px'];
fixedFixture.componentInstance.paneMinSizes = ['0', '0', '0'];
fixedFixture.componentInstance.paneMaxSizes = ['100%', '100%', '100%'];
fixedFixture.componentInstance.splitterWidth = '600px';
fixedFixture.detectChanges();
await fixedFixture.whenStable();
fixedFixture.detectChanges();
const fixedSplitter = fixedFixture.componentInstance.splitter;
const panes = fixedSplitter.panes.toArray();
const splitterBar = fixedFixture.debugElement.queryAll(By.css(SPLITTERBAR_CLASS))[1].componentInstance;

expect(panes.map(pane => pane.size)).toEqual(['100px', '100px', '100px']);
expect(panes[0].element.offsetWidth).toBe(100);
expect(panes[1].element.offsetWidth).toBeGreaterThan(100);

splitterBar.onCollapsing(true);
fixedFixture.detectChanges();

expect(panes[2].collapsed).toBeFalse();
expect(panes.map(pane => pane.size)).toEqual(['100px', '100px', '100px']);
expect(panes.map(pane => pane.element.offsetWidth)).toEqual([100, 100, 100]);
});
it('should reset sizes when pane is runtime collapsed.', () => {
it('should preserve sizes and clear drag sizes when pane is runtime collapsed.', () => {
const panes = splitter.panes.toArray();
panes[0].size = '70%';
panes[1].size = '20%';
panes[2].size = '10%';
panes[0].dragSize = '60%';
panes[2].dragSize = '5%';
fixture.detectChanges();
panes[1].collapsed = true;
fixture.detectChanges();
panes.forEach(pane => {
expect(pane.size).toBe('auto');
});
expect(panes.map(pane => pane.size)).toEqual(['70%', '20%', '10%']);
expect(panes[0].dragSize).toBeNull();
expect(panes[2].dragSize).toBeNull();
});
});

Expand Down Expand Up @@ -582,18 +683,18 @@ export class SplitterTogglePaneComponent extends SplitterTestComponent {

@Component({
template: `
<igx-splitter [type]="type">
<igx-splitter-pane size='30%'>
<igx-splitter [type]="type" [style.width]="splitterWidth">
<igx-splitter-pane [size]="paneSizes[0]" [minSize]="paneMinSizes[0]" [maxSize]="paneMaxSizes[0]">
<div>
Pane 1
</div>
</igx-splitter-pane>
<igx-splitter-pane size='30%'>
<igx-splitter-pane [size]="paneSizes[1]" [minSize]="paneMinSizes[1]" [maxSize]="paneMaxSizes[1]">
<div>
Pane 2
</div>
</igx-splitter-pane>
<igx-splitter-pane size='30%' [collapsed]='true'>
<igx-splitter-pane [size]="paneSizes[2]" [minSize]="paneMinSizes[2]" [maxSize]="paneMaxSizes[2]" [collapsed]='true'>
<div>
Pane 3
</div>
Expand All @@ -603,6 +704,10 @@ export class SplitterTogglePaneComponent extends SplitterTestComponent {
imports: [IgxSplitterComponent, IgxSplitterPaneComponent]
})
export class SplitterCollapsedPaneComponent extends SplitterTestComponent {
public paneSizes = ['30%', '30%', '30%'];
public paneMinSizes = ['10%', '20%', '5%'];
public paneMaxSizes = ['40%', '50%', '35%'];
public splitterWidth: string;
}

@Component({
Expand Down
4 changes: 0 additions & 4 deletions projects/igniteui-angular/splitter/src/splitter/splitter.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,10 +309,6 @@ export class IgxSplitterComponent implements AfterContentInit {
}
});
this.assignFlexOrder();
if (this.panes.filter(x => x.collapsed).length > 0) {
// if any panes are collapsed, reset sizes.
this.resetPaneSizes();
}
}

/**
Expand Down
Loading