Responsive splitter

[Marijke Meersman]

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?

[Buvana Sathasivam]

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

Regards,

Buvana S