body height is cut-off

[mvperez]

Hi,
First of all this is awesome template! I'm trying to see how this well works with angular 2 and I successfully embed Angular 2/Typescript using the starter.html _(copied to starter_angular2.html). However, I have an issue on the height as it is not resizing to the size of the current screen. It seems the content-wrapper is not resizing. Not really sure if it was content-wrapper or somewhere else.

Basically, I stripped-off the entire <div class="wrapper"> and put in "app.html" in the new folder called "app". The starter_angular2.hml is now including the Angular 2 required scripts. Also, under the app folder, I've added the app.ts and boot.ts. For anyone new to typescript, this will automatically create the javascript files when you save the changes to your typescript file.

So the final modification and folder structure are -

Folder structure -

app.ts

import {Component} from 'angular2/core';

@component({
selector: 'app',
templateUrl: 'app/app.html'
})

export class AppComponent {
}

boot.ts

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app';

bootstrap(AppComponent);

starter_angular2.html

<title>AdminLTE 2 | Starter</title>

<!-- ANGULAR 2 -->
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/Rx.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/http.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>

<script>
    System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: { 'app': { defaultExtension: 'ts' } }
    });

    System.import('./app/boot').catch(console.log.bind(console));
</script>

<!-- ./ANGULAR 2 -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.2.0 -->
<script src="plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. Slimscroll is required when using the
     fixed layout. -->

<app>Loading...</app>

app.html

... cut-off the entire code for brevity

tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "system",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules",
"wwwroot"
]
}

Please see the changes in my fork. Also, I think we can add the template I've written to main branch so others who wants a working template for angular 2 can benefit from it.

Output screen:

Cheers,
marvin

[mvperez]

Additional note: I use VS 2015 to edit the project and save the solution "AdminLTE.sln", This way the tsconfig.json can be recognized in the project.

[suvjunmd]

Hey @marvinvperez,

Update app.ts like this:

import {Component, OnInit} from 'angular2/core';
declare var jQuery:any;

@Component({
    selector: 'app',
    templateUrl: 'app/app.html'
})

export class AppComponent implements OnInit {
    ngOnInit() {
        jQuery.AdminLTE.layout.activate();
    }
}

[mvperez]

Hi @suvjunmd

Thank you so much! Your solution save the day. This however do not fix the issue on side-bar-right menu. The "gear" icon on the top-right of the page. The toggle is not working too. This is minor as I may remove that "gear" link, but it would be great if the toggle works too. I updated the fork.

Cheers,
Marvin

[suvjunmd]

You're welcome, Marvin 😄

Here is the full initialization of AdminLTE, copied from app.js. You can choose the needed parts.

import {Component, OnInit} from 'angular2/core';
declare var $:any;
declare var FastClick:any;

@Component({
    selector: 'app',
    templateUrl: 'app/app.html'
})

export class AppComponent implements OnInit {
    ngOnInit() {
        //Easy access to options
        var o = $.AdminLTE.options;

        //Activate the layout maker
        $.AdminLTE.layout.activate();

        //Enable sidebar tree view controls
        $.AdminLTE.tree('.sidebar');

        //Enable control sidebar
        if (o.enableControlSidebar) {
            $.AdminLTE.controlSidebar.activate();
        }

        //Add slimscroll to navbar dropdown
        if (o.navbarMenuSlimscroll && typeof $.fn.slimscroll != 'undefined') {
            $(".navbar .menu").slimscroll({
            height: o.navbarMenuHeight,
            alwaysVisible: false,
            size: o.navbarMenuSlimscrollWidth
            }).css("width", "100%");
        }

        //Activate Bootstrap tooltip
        if (o.enableBSToppltip) {
            $('body').tooltip({
            selector: o.BSTooltipSelector
            });
        }

        //Activate box widget
        if (o.enableBoxWidget) {
            $.AdminLTE.boxWidget.activate();
        }

        //Activate fast click
        if (o.enableFastclick && typeof FastClick != 'undefined') {
            FastClick.attach(document.body);
        }

        //Activate direct chat widget
        if (o.directChat.enable) {
            $(document).on('click', o.directChat.contactToggleSelector, function () {
            var box = $(this).parents('.direct-chat').first();
            box.toggleClass('direct-chat-contacts-open');
            });
        }
    }
}

[mvperez]

Truly appreciate your help @suvjunmd!
I can now close this issue. :) 👍 👍 👍

[praditha]

Hi, I've tried the solutions in angular 2.
But I have error
EXCEPTION: Error in :0:0 caused by: Cannot read property 'activate' of undefined

I've tried to debug, and the undefined value is on layout $.AdminLTE.layout.activate();
Is there anything I missed..?

[rjankathi]

Hi @suvjunmd ,
Thank you for the initialization code .
I tried initializing the sidebar push menu as below in one of my components. Everything is bundled in vendor.js in order 1. Jquery, 2. app.js

var o = $.AdminLTE.options;

        //Activate sidebar push menu
        if (o.sidebarPushMenu) {
            $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
        }

I get the following error
ORIGINAL EXCEPTION: Cannot read property 'options' of undefined.
I tried to check if it is even getting the AdminLTE object its undefined as well. How should I make it available to Jquery ($ ) (Do you think loading them separately will help?) any insight would help.
p.s When I click on hamburger it simply goes to home page

[rjankathi]

Hi @praditha did you find any solution?

[rjankathi]

figured this out
just import the admin-lte into the component (i did that in my nav component) as below. No need to have the initialization code at all
import 'admin-lte';
Note: if you are using webpack bundling, include the plugin as well cos it needs the global variables for jquery
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }),

[praditha]

Hi @nankathi ,
I still not find the solution. I've tried to import 'admin-lte'; like you said.
But when I tried to do ng serve (I used the Angular-CLI), but the build is failed:
Module not found: Error: Can't resolve 'admin-lte' in '/home/praditha/project/03. Vanilla-POS/angularjs-2/vanilla-pos-cms/src/app/pages/products'

here is my project structure folder

project_root
|--- bower_components
     |--- AdminLTE    -> here I download AdminLTE project using bower
|--- src
     |--- app
          |--- pages
               |-- product.component.ts    -> I tried to put the activate layout function here, because the cut off is starting here
          |--- app.component.ts            -> here is my first component will be run
          |--- app.module.ts               -> here is where I defined all module, component, providers, etc.
     |--- index.html              -> here is where I load AdminLTE js src="../bower_components/AdminLTE/dist/js/app.min.js"

And I tried to activate the layout like this on product.component.ts:

import { Component } from '@angular/core'
import 'admin-lte';
declare var $:any;

@Component({
    selector: 'product-app',
    templateUrl: './product.component.html'
})

export class ProductComponent {
     ngOnInit() {
        var o = $.AdminLTE.options;
        $.AdminLTE.layout.activate();
    }
}

Is it because I'm wrong to pointing the admin-lte javascript code..?
I've already load the js code on my index.html

[rjankathi]

Hi @praditha
I prefer npm instead (npm install --save admin-lte)
But try this to get the module from the bower_Components
import admin-lte from 'bower_components/admin-lte';
guess this will give you some hint as well : https://www.npmjs.com/package/bower-webpack-plugin
Hope it will fix

[pdeio]

@praditha for angular 4 I've found a solution for min-height problem. Place this code on your component.ts
`
ngOnInit()
{
// sedding the resize event, for AdminLTE to place the height

	let ie = this.detectIE(); 
	if (!ie) {
		window.dispatchEvent(new Event('resize'));
	} else {
		// solution for IE from @hakonamatata
		let event = document.createEvent('Event');
		event.initEvent('resize', false, true);
		window.dispatchEvent(event);
	}
}


protected detectIE(): any {
	let ua = window.navigator.userAgent;

	// Test values; Uncomment to check result …
	// IE 10
	// ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';
	// IE 11
	// ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';
	// IE 12 / Spartan
	// ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';
	// Edge (IE 12+)
	// ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
	// Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

	let msie = ua.indexOf('MSIE ');
	if (msie > 0) {
		// IE 10 or older => return version number
		return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
	}

	let trident = ua.indexOf('Trident/');
	if (trident > 0) {
		// IE 11 => return version number
		let rv = ua.indexOf('rv:');
		return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
	}

	let edge = ua.indexOf('Edge/');
	if (edge > 0) {
		// Edge (IE 12+) => return version number
		return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
	}

	// other browser
	return false;
}`

[jampueroc]

@deio89 I try with angular 4.2.3 and admin-lte 2.3.11 (saved with npm), and after change some components using routerLink, I get the cut-off D:

I had your code in every component (I put a service with your fix)

I tried with $.AdminLTE.layout.activate() in console but didn't work, but If I refresh manually works

[edgexie]

@marvinvperez
hi, its a better day.
I get the same problem recently. At admin-lte 2.3.11, I tried with $.AdminLTE.layout.activate(), and it had an error Cannot read property 'activate' of undefined, here is my code:

import { Component, OnInit } from '@angular/core';
declare var $:any;

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    $.AdminLTE.layout.activate();
  }

}

do you have some solution?

[lszhu]

in v2.4 $.AdminLTE is invalid, any update here?

[chelendez]

Change ngOnInit by this:

import { Component, OnInit } from '@angular/core';
declare var $:any;

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {

  constructor() { }

  ngOnInit() {
     $(document).ready(() => {

  	  const b:any = $('body');
  	  b.layout('fix');

    });
  }

}

[LaeraFelipe]

ngOnInit() {
    $('body').layout('fix');
  }

[boussoufiane]

Finally i fixe the problem by adding this to component :
declare var $:any; $('body').layout('fix');
NB : i use adminlte 2.4 with angular 6

[bhenjylbhenj]

@boussoufiane thank you that worked for my case but how about the sidebars. Or where I can find those jquery functions?

[LaeraFelipe]

@bhenjylbhenj https://adminlte.io/docs/2.4/js-layout