How can I help you?
Pane sizing in EJ2 JavaScript Splitter control
5 Mar 202610 minutes to read
Splitter allows providing pane sizes in either pixel or percentage formats.
Auto size panes
The splitter’s panes are adjusted automatically during resizing if the size is not specified externally to panes, because the panes are designed based on flex layout by default. When panes are added, removed, shown, or hidden, they are automatically realigned within the container.
// Initialize Splitter control
var splitObject = new ej.layouts.Splitter({
height: '250px',
width: '600px'
});
// Render initialized splitter
splitObject.appendTo('#splitter');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Splitter </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Uploader Component">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<!--element which is going to render the splitter-->
<div id="splitter">
<div>
<div class="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>
</div>
<div>
<div class="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>
</div>
<div>
<div class="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>
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Fixed pane
Render split panes with fixed size in both horizontal and vertical mode. If fixed sizes are provided for all panes, the last pane is treated as a flexible pane.
// Initialize Splitter control
var splitObject = new ej.layouts.Splitter({
height: '200px',
paneSettings: [
{ size: '200px', content: 'Left pane'
},
{ size: '200px', content: 'Middle pane'
},
{ size: '200px', content: 'Right pane'
}
],
width: '600px'
});
// Render initialized splitter
splitObject.appendTo('#splitter');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Splitter </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Uploader Component">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<!--element which is going to render the splitter-->
<div id="splitter">
<div>Left pane</div>
<div>Middle pane</div>
<div>Right pane</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>// Initialize Splitter control
var splitObject = new ej.layouts.Splitter({
height: '200px',
paneSettings: [
{ size: '30%', content: 'Left pane'
},
{ size: '40%', content: 'Middle pane'
},
{ size: '30%', content: 'Right pane'
}
],
width: '600px'
});
// Render initialized splitter
splitObject.appendTo('#splitter');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Splitter </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Uploader Component">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<!--element which is going to render the splitter-->
<div id="splitter">
<div>Left pane</div>
<div>Middle pane</div>
<div>Right pane</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>