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

Splitter not occupying full width

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.

2 Replies

ME Me January 30, 2017 12:07 PM UTC

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.



RJ Rekha J Syncfusion Team January 31, 2017 09:45 AM UTC

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  
 


Loader.
Up arrow icon