Resizing panes in React Splitter component

7 Oct 202524 minutes to read

By default, pane resizing is enabled in the React Splitter component. A gripper element is added to the separator to make resizing intuitive and user-friendly.

The horizontal Splitter allows resizing in horizontal directions.
The vertical Splitter allows resizing in vertical directions.

During resizing, the adjacent panes automatically adjust their dimensions to accommodate the change.

Minimum and Maximum size constraints

You can define minimum and maximum sizes for each pane. Resizing is restricted within these boundaries to maintain layout integrity.

[Class-component]

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    render() {
        return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
        <PanesDirective>
          <PaneDirective size='200px' content={this.leftContent} min='20%' max='40%'/>
          <PaneDirective size='200px' content={this.middleContent} min='30%' max='60%'/>
          <PaneDirective size='200px' content={this.rightContent}/>
        </PanesDirective>
      </SplitterComponent>
  </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  public middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  public rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }
  public render(): JSX.Element {
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
        <PanesDirective>
          <PaneDirective size='200px' content = {this.leftContent} min='20%' max='40%'/>
          <PaneDirective size='200px' content = {this.middleContent} min='30%' max='60%'/>
          <PaneDirective size='200px' content = {this.rightContent} />
        </PanesDirective>
      </SplitterComponent>
  </div>);
  }
}
export default App;

[Functional-component]

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    function middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    function rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
        <PanesDirective>
          <PaneDirective size='200px' content={leftContent} min='20%' max='40%'/>
          <PaneDirective size='200px' content={middleContent} min='30%' max='60%'/>
          <PaneDirective size='200px' content={rightContent}/>
        </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  function middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  function rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }

    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
        <PanesDirective>
          <PaneDirective size='200px' content = {leftContent} min='20%' max='40%'/>
          <PaneDirective size='200px' content = {middleContent} min='30%' max='60%'/>
          <PaneDirective size='200px' content = {rightContent} />
        </PanesDirective>
      </SplitterComponent>
    </div>);

}
export default App;

Disabling pane resizing

You can disable the resizing for the pane by setting false to the resizable property within paneSettings.

[Class-component]

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    render() {
        return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={this.leftContent} resizable={false}/>
        <PaneDirective size='200px' content={this.middleContent}/>
        <PaneDirective size='200px' content={this.rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  public middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  public rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }
  public render(): JSX.Element {
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {this.leftContent} resizable={false}/>
        <PaneDirective size='200px' content = {this.middleContent} />
        <PaneDirective size='200px' content = {this.rightContent} />
      </PanesDirective>
      </SplitterComponent>
    </div>);
  }
}
export default App;

[Functional-component]

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    function middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    function rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={leftContent} resizable={false}/>
        <PaneDirective size='200px' content={middleContent}/>
        <PaneDirective size='200px' content={rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  function middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  function rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }

    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {leftContent} resizable={false}/>
        <PaneDirective size='200px' content = {middleContent} />
        <PaneDirective size='200px' content = {rightContent} />
      </PanesDirective>
      </SplitterComponent>
    </div>);

}
export default App;

Refreshing content during resize

You can refresh pane content dynamically during resizing by using the following events:

Customizing Resize-gripper and Cursor

You can style the resize gripper icon and cursor using CSS to match your application’s design.

[Class-component]

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    render() {
        return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={this.leftContent}/>
        <PaneDirective size='200px' content={this.middleContent}/>
        <PaneDirective size='200px' content={this.rightContent}/>
      </PanesDirective>
      </SplitterComponent>
  </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  public middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  public rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }
  public render(): JSX.Element {
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {this.leftContent} />
        <PaneDirective size='200px' content = {this.middleContent} />
        <PaneDirective size='200px' content = {this.rightContent}  />
      </PanesDirective>
      </SplitterComponent>
  </div>);
  }
}
export default App;

[Functional-component]

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function leftContent() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    function middleContent() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    function rightContent() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={leftContent}/>
        <PaneDirective size='200px' content={middleContent}/>
        <PaneDirective size='200px' content={rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App() {
  function leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  function middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  function rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
   }
    return (<div className="App">
      <SplitterComponent id="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {leftContent} />
        <PaneDirective size='200px' content = {middleContent} />
        <PaneDirective size='200px' content = {rightContent}  />
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;

See Also