Pane sizing in Angular Splitter component
12 Sep 202513 minutes to read
The Angular Splitter component allows you to define pane sizes using pixel values, percentage values, or automatic sizing based on layout behavior.
Set pane size in pixels
To assign fixed pixel values to panes, use the size property in paneSettings. This ensures consistent pane dimensions regardless of container size.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule, SplitterModule
],
standalone: true,
selector: 'app-root',
template: `
<div id='container'>
<ejs-splitter #plain height='200px' width='600'>
<e-panes>
<e-pane size='200px' content='<div class="content">Left pane</div>'>
</e-pane>
<e-pane size='200px' content='<div class="content">Middle pane</div>'>
</e-pane>
<e-pane size='200px' content='<div class="content">Right pane</div>'>
</e-pane>
</e-panes>
</ejs-splitter>
</div>`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Set pane size in percentage
You can also define pane sizes as percentages. This approach ensures responsive behavior across different screen sizes.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'
import { Component, ViewChild } from '@angular/core';
@Component({
imports: [
FormsModule, SplitterModule
],
standalone: true,
selector: 'app-root',
template: `
<div id='container'>
<ejs-splitter #plain height='200px' width='600'>
<e-panes>
<e-pane size='30%' content='<div class="content">Left pane</div>'>
</e-pane>
<e-pane size='40%' content='<div class="content">Middle pane</div>'>
</e-pane>
<e-pane size='30%' content='<div class="content">Right pane</div>'>
</e-pane>
</e-panes>
</ejs-splitter>
</div>`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Auto-size panes
When no explicit size is provided, panes automatically adjust based on available space. This behavior is powered by the default flex layout, allowing dynamic resizing when panes are added, removed, shown, or hidden.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'
import { Component, ViewChild } from '@angular/core';
@Component({
imports: [
FormsModule, SplitterModule
],
standalone: true,
selector: 'app-root',
template: `
<div id='container'>
<ejs-splitter #template height='200px'width='600px' >
<e-panes>
<e-pane>
<ng-template #content>
<div class="auto-size-content">
<h3 class="h3">Grid </h3>
The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
</div>
</ng-template>
</e-pane>
<e-pane>
<ng-template #content>
<div class="auto-size-content">
<h3 class="h3">Schedule </h3>
The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
</div>
</ng-template>
</e-pane>
<e-pane>
<ng-template #content>
<div class="auto-size-content">
<h3 class="h3">Chart </h3>
ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
</div>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter>
</div>`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Fixed pane
You can configure panes with fixed sizes in both horizontal and vertical orientations. However, even when all panes are assigned fixed sizes, the Splitter treats the last pane as flexible to ensure layout adaptability. At least one pane must remain flexible to accommodate container changes.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'
import { Component, ViewChild } from '@angular/core';
@Component({
imports: [
FormsModule, SplitterModule
],
standalone: true,
selector: 'app-root',
template: `
<div id='container'>
<ejs-splitter #resize height='200px' width='600'>
<e-panes>
<e-pane size='200px'>
<ng-template #content>
<div class="fixed-pane-content">
<h3 class="h3">Grid </h3>
The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
</div>
</ng-template>
</e-pane>
<e-pane size='200px'>
<ng-template #content>
<div class="fixed-pane-content">
<h3 class="h3">Schedule </h3>
The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
</div>
</ng-template>
</e-pane>
<e-pane size='200px'>
<ng-template #content>
<div class="fixed-pane-content">
<h3 class="h3">Chart </h3>
ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
</div>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter>
</div>`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));