angular-split not wokring

[sardar-nale]

Hi,
I am referring to link https://bertrandg.github.io/angular-split/#/

1. I have installed angular-split using command
   npm install angular-split --save
2. configured app.module.ts
   i) imported using satement import { AngularSplitModule } from 'angular-split';
   ii)imports statement like imports: [ // import Angular's modules
   BrowserModule,
   FormsModule,
   HttpModule,
   RouterModule.forRoot(ROUTES, { useHash: true }),
   ChartModule,
   TranslateModule.forRoot(),
   AngularSplitModule
   ],
   iii)Added html in home.component.html

<split direction="vertical">
   <split-area [size]="25">
        <p>Lorem ipsum dolor sit amet...</p>
    </split-area>
    <split-area [size]="75">
        <p>Sed ut perspiciatis unde omnis iste natus erro...</p>
    </split-area>
</split>

But still it doesn't work. It shows splitter component but it does not move when I try to slide
Kindly help.
My pacakge.json file package dependancies are as follows :

{
   "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/platform-server": "2.4.1",
    "@angular/router": "3.4.1",
    "@angularclass/conventions-loader": "1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "angular-split": "^0.1.15",
    "angular2-highcharts": "^0.4.0",
    "assets-webpack-plugin": "^3.4.0",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "ng2-translate": "^5.0.0",
    "protractor": "^4.0.14",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.0.2",
    "zone.js": "~0.7.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.1",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.34",
    "@types/node": "^6.0.38",
    "@types/selenium-webdriver": "2.53.38",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^1.12.34",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "~3.0.0-beta.17",
    "codelyzer": "~2.0.0-beta.4",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.26.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.9.0",
    "gh-pages": "^0.12.0",
    "html-webpack-plugin": "^2.21.0",
    "imports-loader": "^0.7.0",
    "istanbul-instrumenter-loader": "1.2.0",
    "json-loader": "^0.5.4",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.8.0",
    "node-sass": "^4.1.1",
    "parse5": "^2.2.1",
    "raw-loader": "0.5.1",
    "rimraf": "~2.5.4",
    "sass-loader": "^4.1.1",
    "script-ext-html-webpack-plugin": "1.3.2",
    "source-map-loader": "^0.1.5",
    "string-replace-loader": "1.0.5",
    "style-loader": "^0.13.1",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.2",
    "ts-node": "^2.0.0",
    "tslint": "^4.0.0-dev.0",
    "tslint-loader": "^3.3.0",
    "typedoc": "^0.5.3",
    "typescript": "2.0.10",
    "url-loader": "^0.5.7",
    "webpack": "2.1.0-beta.25",
    "webpack-dev-middleware": "1.6.1",
    "webpack-dev-server": "2.1.0-beta.9",
    "webpack-md5-hash": "0.0.5",
    "webpack-merge": "0.15.0"
  },
    "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

[calebeaires]

It could be the split-gutter html tag that are not fixed on the right place. Try to chant its css to take the whole height.

[sardar-nale]

Hi calebeaires ,
I am able to see that dragger component but not able to drag its fixed at one place.
How can I apply css to it work. Can you please give example

[sardar-nale]

Hey I just checked it does not formed split-gutter component.
Kindly suggest

[bertrandg]

Be sure that your <split> component is inside a tag with height specified, you have 2 choices:

• Set it to specific height in pixels: height: 300px, what I did here: https://bertrandg.github.io/angular-split/#/examples
• Set it to a percentage: height: 100% but in that case, you have to set all parents height too, more about this: http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work

If it changes nothing, what's your way to bundle your app, angular-cli, starter?

[sardar-nale]

Hey thank you very much.By giving height to parent it get solved

[gchurchley]

I could not see the splitter and none of the aforementioned solutions worked for me.
I'm using the setting unit="pixel"

Setting a fixed height would enable me to see the splitter but my panes have flexible heights so that solution wasn't practical.

I found that overriding the height setting to auto worked a charm. It's a simple solution:
.as-horizontal > .as-split-gutter {
height: auto !important;
}
This solution also works with panes for which the height is determined by their content!