Adminlte: Height auto on element

[wen96]

Hey, I've just update to version 2.3.11 the js code is adding height: auto on html, body and main because of this line. I want a height: 100% and it is pretty hard to override an element css rule. Is there another way to fix #1191 without doing this?

[almasaeed2010]

Hello @wen96,

Adding height:auto allows the browser to scroll automatically to the last position upon refresh of the page. However, if you find it necessary to have height 100%, then you could add js line after loading app.js to fix this.

I don't believe that this line is causing issue #1191. There is something else that we are missing.

$(function() {
  $('html, body, .wrapper').css('height', '100%');
})

Thanks!

[wen96]

Hey, thanks for answer. I don't mean that the line is causing the issue #1191, what I mean is that the fix for the issue is causing a new "issue". And what I'm asking for is to solve #1191 on a different way to avoid the new issue. I know, I can fix it overriding the the css class with javascript after AdminLTE is loaded but I don't want to introduce load-order dependencies on my project, it is not good for code maintenance.

TL;DR; The fix for #1191 introduces a new "non-desired" behavior. Could we fix it on a different way?

[gabel]

Same here. This fix is killing a fullscreen cover background on element on the login page template.

[mxgr7]

Is this going to be addressed?

[raziel057]

Maybe an option could allow to active this behavior. Currently app.js (adminlte.min.js) must not be included in login pages but it must be the case for all other pages:

• Page source: https://adminlte.io/themes/AdminLTE/pages/examples/login.html

<!-- jQuery 3.1.1 -->
<script src="../../plugins/jQuery/jquery-3.1.1.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="../../plugins/iCheck/icheck.min.js"></script>

• Page source: https://adminlte.io/themes/AdminLTE/pages/forms/general.html

<!-- jQuery 3.1.1 -->
<script src="../../plugins/jQuery/jquery-3.1.1.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>

When working with Single pages applications, all main js script must be added to the main page to be loaded. So it would be bad to not import app.js (adminlte.min.js in this example). But when imported, it break the login page because of the $.AdminLTE.layout.activate() call.

[MGParisi]

I'm also running into this issue. I'm not sure why this is done in the Js and not in the style of the template. This seems like it would be better to use the template for this and not to put it in the Javascript. Then it would make it easier for us to change it.

Also, JS is not working to change it.

A possible solution is to check the element for a height style and if it has one. Do not change it. Another possible solution is to make multiple templates out of this.

What ever the solution is, the solution found in the JS is unacceptable and not good. This makes it extremely hard to bug fix and makes it even harder to find a solution from.

I'm guessing I have to build a custom template that contains just the code I need? It will make it a nightmare to bug test in the future and solutions to this problem are going to be felt when upgrading. This was not well thought out.

[MGParisi]

It appears that the only fix that seems to work is...

    <style>
        html {
            height: 100% !important;
        }
    </style>

[REJack]

Is this issue still open in v2.4.12?