body height is cut-off - Githubissues

mvperez commented 8 years ago

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 <!DOCTYPE html>

AdminLTE 2 | Starter ``` Loading... ```

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: ![image](https://cloud.githubusercontent.com/assets/17961526/15035283/e873ce00-12b2-11e6-9c0e-94eb22210c4c.png) Cheers, marvin

mvperez commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

You're welcome, Marvin :smile:

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 commented 8 years ago

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

praditha commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Hi @praditha did you find any solution?

rjankathi commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@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 commented 6 years ago

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

chelendez commented 6 years ago

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 commented 6 years ago

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

boussoufiane commented 6 years ago

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 commented 6 years ago

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

LaeraFelipe commented 6 years ago

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

ColorlibHQ / AdminLTE

body height is cut-off #1033