Hi Me,
Thanks for contacting Syncfusion Support.
For your issue, “Splitter is not occupying full width as is required,” we suggest that you give height of the parent element in pixels or some definite value, so that the splitter can cover the whole element. You need to use “isResponsive” property instead of “enableautoresize”. To apply custom CSS using cssClass property, you need to define it based on the hierarchy to apply background for panes.
Please refer to the below code snippet to achieve this.
@Component({
selector: 'step-filters',
templateUrl: 'app/step-filters.component.html',
encapsulation:ViewEncapsulation.None,
styles: ['.mySplitter .e-pane{ width: 100%; height: 100%;background-color: green;}']
})
export class AppComponent {
proper:Array<{paneSize:string}>;
responsive:Boolean;
constructor() {
this.proper = [ { paneSize: "250px", maxSize: "500px", expandable: false }, {paneSize: "auto", minSize: "auto", maxSize: "auto", collapsible: false }];
this.responsive=true;
}
}
//Html file
<div style="width:100%;height:500px;">
<ej-splitter id="mySplitter" cssClass="mySplitter" [properties]="proper" style="display:block;" [isResponsive]="responsive">
</ej-splitter>
<div>
|
For your reference, we have created a simple sample and the sample is available in:
Regards,
Rekha