How to render the splitter control with full height and width?
The splitter control takes the height and width based on its container. You can render the splitter control with full height and width by setting 100% height and width to its parent elements. The following code snippet demonstrates how to render the splitter control with full height and width.
<style type="text/css">
html, body {
margin:0px;
padding:0px;
height:100%;
width:100%;
}
</style>
<div style="margin:0;padding:0;height:100%;width:100%;">
<div id="outterSplitter">
<div>
<div class="content">Pane 1</div>
</div>
<div>
<div class="content">Pane 2</div>
</div>
</div>
</div>
In the above code, the height and width has been set to 100% for the parent elements of the splitter. It renders the splitter with 100% height and width.
Final output
Sample: https://jsplayground.syncfusion.com/0bl1c0u1
Conclusion
I hope you enjoyed learning about how to render the splitter control with full height and width.
You can refer to our JavaScript Splitter feature tour page to know about its other groundbreaking feature representations. You can also explore our JavaScript Splitter documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
