Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

body height is cut-off

See original GitHub issue

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> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AdminLTE 2 | Starter</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="dist/css/AdminLTE.min.css"> <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css"> </head> <body class="hold-transition skin-blue sidebar-mini">

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

</body> </html>

app.html

<div class="wrapper"> ... 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

Issue Analytics

State:
Created 7 years ago
Comments:20 (2 by maintainers)

Top GitHub Comments

9reactions

suvjunmdcommented, May 9, 2016

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();
    }
}

3reactions

suvjunmdcommented, May 10, 2016

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');
            });
        }
    }
}

Top Results From Across the Web

Background cut off with html and body 100% height

Setting height: 100% on html forces its height to be that of the viewport (causing that cutoff). Try setting html 's height to...

Cut-off points for height, weight and body mass ... - PubMed

Cut-off points for height, weight and body mass index adjusted bioimpedance analysis measurements of muscle mass with use of different threshold definitions.

Adult Body Mass Index - Overweight & Obesity - CDC

Adult Body Mass Index. BMI is a person's weight in kilograms divided by the square of height in meters. A high BMI can...

A novel cutoff for the waist-to-height ratio predicting metabolic ...

The Optimal Cut-Off Value of Waist-to-Height Ratio for Detecting Severe Central Obesity and Low Body Weight Adult Chinese Population.

Optimal Cut-Off Points of Weight for Height, Waist ...

The Body Mass Index (BMI) is widely used to diagnose overweight and obesity. However, there are limitations on the use of BMI and ......