We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Responsive splitter

I want to make an outlook style layout with the splitter, but when the screen gets too small, render it underneath each other.

I couldn't seem to find an example of that, is there a simple way to make it more responsive this way?

1 Reply

BS Buvana Sathasivam Syncfusion Team March 29, 2023 01:48 PM UTC

Hi Marijke,

Greetings from Syncfusion support.

If the width of the Splitter component decreases, you can change its orientation. In below sample, we switched it to a vertical layout from horizontal layout when the splitter width dropped below 550px.

@HostListener('window:resize', ['$event'])

  onWindowResize() {

    if (this.splitterObj.element.getBoundingClientRect().width <= 550) {

      this.splitterObj.orientation = 'Vertical';

    } else {

      this.splitterObj.orientation = 'Horizontal';




Sample: https://stackblitz.com/edit/angular-jk39bd-gyvek9?file=src%2Fapp.component.ts,src%2Fapp.component.css

Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/splitter/outlook-style-layout

API link: https://ej2.syncfusion.com/angular/documentation/api/splitter#orientation


Buvana S

Live Chat Icon For mobile
Up arrow icon