Splitter not occupying full width

[Me]

Hello,

Splitter is not occupying full width as is required. You can see in image that yellow color (parent background) is visible equally on both sides. How can I make splitter to use full width?

splitterProperties I use: 
[ { paneSize: "250px", maxSize: "500px", expandable: false }, { paneSize: "auto", minSize: "auto", maxSize: "auto", collapsible: false}]

css:
.mySplitter {
  /*margin-right: 150px;*/
  /*margin-left: -15px;
  width: 102.68%;*/
  width: 100%;
  height: 100%;
  background-color: green;
}

control:
<ej-splitter id="mySplitter" cssClass="mySplitter" [properties]="splitterProperties ">

Sample photo:


P.S. Yellow color shouldn't be visible as splitter should take full parent width.

[Me]

Also, in documentation: https://help.syncfusion.com/angular-2/splitter/getting-started I see that there is code:

<ej-splitter id="outterSpliter" class="ang-splitter" e-height ="100%" e-width="485" e-properties="proper"  e-enableautoresize="true">


However, none of this works. e-properties must be [properties]="proper" in order to work and e-enableautoresize doesn't work in any way at all. What I'm missing? 
I checked ej.splitter.min.js file and it's: 14.4.0.20. It does have enableautoresize property.

[Rekha J]

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:  

 

http://www.syncfusion.com/downloads/support/forum/128572/ze/Splitter-398384418.zip 

  

Regards,   

Rekha