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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Splitter not occupying full width

Thread ID:

Created:

Updated:

Platform:

Replies:

128572 Jan 30,2017 10:49 AM UTC Jan 31,2017 09:45 AM UTC Angular 2
loading
Tags: ejSplitter
Me
Asked On January 30, 2017 10:49 AM UTC

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
Replied On 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.


Rekha J [Syncfusion]
Replied On 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  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;