Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Splitter not working with bootstrap


I am trying to add igsplitter with my angular2/bootstrap/webpack app. On the left side I am having igdatagrid and on right side map component, when I try to move the splitter it does not move but when I do resizing of window it works normally. But after some interaction splitter freezing issue starts.

My Scenario is like below:

1) First full map loads

2) When I click on button datagrid load on left side of map with splitter

3) Again I want to hide the datagrid on click of button

I also wants to know how I can destroy igsplitter, I used igSplitter('destroy') but that is now working. As mentioned above I want to hide the datagrid on click of button so I also need to destroy the igSplitter at the same time.

I tried below code but getting issues as mentioned above.

splitter() {
height: '100%',
panels: [
{ size: '50%', min: '25%', max: '100%'},
{ size: '50%', min: '25%', max: '100%'}
stopSplitter() {

$('.splitter').igSplitter("collapseAt", 0);