Adminlte: Collapsed box won't work correctly since update version from 2.3.7 to 2.4.2

[Mokette]

Issue type:

• [ ] Feature request
• [x] Bug report
• [ ] Documentation

Environment:

• AdminLTE Version: 2.4.2
• Operating System: Lunbuntu
• Browser (Version): Chrome (Latest) / Firefox (latest)

Description:

Hi, (if i'm wrong, i'm sorry and please close this issue)
I've look around but not found something to solve this little problem.
I'm currently running an app using angular2 (v4.4.6) and i'm using adminLTE for template.
But recently i've notice some trouble on the collapse box (wich were working fine before update version of adminLTE)
Before i was using the adminLTE 2.3.7 and this feature worke fine :
load adminLTE in my index.html file :

<script src="node_modules/admin-lte/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="node_modules/admin-lte/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/admin-lte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="node_modules/admin-lte/dist/css/skins/skin-black.css">
<script src="node_modules/admin-lte/dist/js/app.js"></script>

and my html template look like that :

<div class="box flat box-warning">
  <div class="box-header with-border">
    <h3 class="box-title">{{"tracker" | translatePipe}}</h3>
  </div>
  <div class="box-body">
    <div class="box box-default collapsed-box flat">
      <div class="box-header with-border">
        <h3 class="box-title">{{ "potentials trackers" | translatePipe }}</h3>
        <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="" data-original-title="Collapse"><i class="fa fa-plus"> </i></button>
        </div>
      </div>
      <div class="box-body no-padding">
        <div>some content</div>
      </div>
    </div>
  </div>
</div>

And that was working perfectly. my box load collapsed and the button allow me to expend/collapse the box infinitly :) (i use only data-attribute for using it ;) )
But yesterday i upgrade my adminlte version from 2.3.7 to 2.4.2 the latest available on npm.
So i've updated my index.html file for loading the latest version like that :

<script src="node_modules/admin-lte/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="node_modules/admin-lte/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/admin-lte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="node_modules/admin-lte/dist/css/skins/skin-black.css">
<script src="node_modules/admin-lte/dist/js/adminlte.js"></script>

And now the collapsed box don't work anymore, clicking the button doesn't do anything, no expand/collapse box, no error in the browser console.
So for the moment i've just roolback to adminLTE v2.3.7 to keep my app working fine but not the best way for solving a problem :p

So if anyone got a clue or can help me a bit here i'll be glad :)
Thanks all !
Regards,

if you need more infomations, i'll be happy to give it.

[REJack]

It looks like you missed data-widget="box-widget" in <div class="box">.

[Mokette]

Thanks for your answer and for the tip, but not fix the problem :s
Even with the data-widget="box-widget" in the <div class="box"> :

<div class="box flat box-warning">
  <div class="box-header with-border">
    <h3 class="box-title">{{"tracker" | translatePipe}}</h3>
  </div>
  <div class="box-body">
    <div class="box box-default collapsed-box flat" data-widget="box-widget">
      <div class="box-header with-border">
        <h3 class="box-title">{{ "potentials trackers" | translatePipe }}</h3>
        <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"> </i></button>
        </div>
      </div>
      <div class="box-body no-padding">
        <div>some content</div>
      </div>
    </div>
  </div>
</div>

it still doesn't work :/

i've take a look to the doc on box-widget here : https://adminlte.io/docs/2.4/js-box-widget
Even using the html example from here to test, doesn't work i'm a bit confuse :/

Regards,

[Mokette]

I've looked to this differentes issues (#1791 , #1681 , #1725 ) but can't find an answer there either :s
Try some of suggeted fix but doesn't fix my problem :/

[brunck]

I had the exact same problem and had to downgrade back to 2.3.7 in order to get this functionality back.

[phantase]

I have the same problem with the 2.4.2. It was working with a 2.3.11 (that's the verion I was requested in my project before).

In my case, I use AdminLTE in a VueJS project, and when I arrive directly on a page with a collapsable box, this box works fine, but if I go to another page, then the collapse will not work anymore.

[pandabamboo90]

Updated to v2.4.3 fixed this problem. 👍

[phantase]

I have just try with the v2.4.3, and it doesn't fix the problem for me.

[almasaeed2010]

Please see the docs https://adminlte.io/docs/2.4/js-box-widget

you need to add data-widget="collapse" and data-widget="remove" to the buttons.

Thanks!

[Mokette]

@pandabamboo90 Thx for the tip :) Just notice that the v2.4.3 was just released on npm !
Gonna try the upgrade to see if it'll fix the problem :)

[Mokette]

After update my package.json with the 2.4.3 version it still not work :s (i use adminLte from npm)
Even using the example from the docs it's not working.

<div class="box" data-widget="box-widget">
  <div class="box-header with-border">
    <h3 class="box-title">Collapsible Box Example</h3>
    <div class="box-tools pull-right">
      <button type="button" class="btn btn-box-tool" data-widget="collapse">
        <i class="fa fa-minus"></i>
      </button>
    </div>
  </div>
  <div class="box-body">
    The body of the box
  </div>
  <div class="box-footer">
    The footer of the box
  </div>
</div>

Using the data-widget="box-widget"or not doesn't change the problem, still not working :s
Don't know if it's link but after upgrade my node_modules adminLTE, if i go the node_modules/admin-lte/dist/js/adminlte.js it still show * @version 2.4.2 at the top of the file... (but using npm ls admin-lteto show the version of adminlte show v2.4.3, so it's really strange :/)
Maybe i'm missing something but really don't know what :s
Thanks for your help !

Regards,

[mfouadegy]

i face the same problem :(

[arisobel]

i also face the same problem - but changed only the main JS, to https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.3/js/adminlte.min.js
and Solved!! thanks!

[Mokette]

Hello :)
still facing the issue :s
Even using the adminlte.min.js as main instead of adminlte.js doesn't fix the problem. (still using adminlte with npm and no other way ^^
Regards,

[arisobel]

you need to use the newst version of adminlte.min.js (or adminlte.js)

[Mokette]

Hello,
i'm using the last version of adminlte i can find with npm (2.4.3) and still facing the issue :s
Really don't understand why it still not works.
I maybe miss something but don't really know what :/
Thanks for your help !
Regards,

(edit): i've try use this adminlte.js : https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.3/js/adminlte.min.js instead of the one in the node_modules folder but still not fix the problem. Maybe i've got some conflicts with the angular files :s

[Adeyosola]

@Mokette did you find a solution? I faced the same issue after I updated adminLTE to version 2.4.3 on npm. I'm using it in an angularjs project as well and can only use npm

[Mokette]

@Adeyosola no, still looking for a working solution with the last version of AdminLTE, i've return to use AdminLTE v2.3.7 to make it work. Gonna try with the new last version using npm "3.0.0-alpha.2" as soon as possible (probably not before the end of the week cause of patch deploy on my app) and i'll see if it now works correctly !
Gonna report here how it works as soon as i'm gonna test it :)

[harryhan1989]

Similar issue: https://github.com/almasaeed2010/AdminLTE/issues/1857
Solution:
Here again, on 2.4, the box can not be collapsed if they are loaded in ajax.
A automated test should be added to prevent this kind of bug in the future.
Current possible workaround waiting the fix, using the arrive component:
jQuery(document).arrive('div.box [data-widget]', (element) => { $(element).parents('.box').boxWidget(); });

[ranjangolden]

Dear harryhan1989,

I am loading Box through ajax, I am unable to expand box. Can you please suggest me where can i use this code.

[ranjangolden]

@Adeyosola no, still looking for a working solution with the last version of AdminLTE, i've return to use AdminLTE v2.3.7 to make it work. Gonna try with the new last version using npm "3.0.0-alpha.2" as soon as possible (probably not before the end of the week cause of patch deploy on my app) and i'll see if it now works correctly !
Gonna report here how it works as soon as i'm gonna test it :)

I am loading Box through ajax, I am unable to expand box. Can you please suggest me where can i use this code.

[ranjangolden]

Similar issue: #1857
Solution:
Here again, on 2.4, the box can not be collapsed if they are loaded in ajax.
A automated test should be added to prevent this kind of bug in the future.
Current possible workaround waiting the fix, using the arrive component:
jQuery(document).arrive('div.box [data-widget]', (element) => { $(element).parents('.box').boxWidget(); });

I am loading Box through ajax, I am unable to expand box. Can you please suggest me where can i use this code.

[ranjangolden]

Similar issue: #1857
Solution:
Here again, on 2.4, the box can not be collapsed if they are loaded in ajax.
A automated test should be added to prevent this kind of bug in the future.
Current possible workaround waiting the fix, using the arrive component:
jQuery(document).arrive('div.box [data-widget]', (element) => { $(element).parents('.box').boxWidget(); });

I am loading Box through ajax, I am unable to expand box. Can you please suggest me where can i use this code.

[christiamme]

Use .boxRefresh() to load your content to prevent the collapse function from failing.
Note: The example in the documentation shows "refreshBox" when it should be "boxRefresh".

$("#my-box").boxRefresh({
    // The URL for the source.
    source: 'URL-to-box-content-source',
    // GET query paramaters (example: {search_term: 'layout'}, which renders to URL/?search_term=layout).
    params: {  },
    // The CSS selector to the refresh button.
    trigger: '.give-your-button-an-id',
    // The CSS selector to the target where the content should be rendered. This selector should exist within the box.
    content: '.box-body',
    // Whether to automatically render the content.
    loadInContent: true,
    // Response type (example: 'json' or 'html')
    responseType: '',
    // The HTML template for the ajax spinner.
    overlayTemplate: '<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>',
    // Called before the ajax request is made.
    onLoadStart: function() {
      // Do something before sending the request.
    },
    // Called after the ajax request is made.
    onLoadDone: function(response) {
      // Do something after receiving a response.
    }
  });

[ZackPK]

All,

As a workaround, add "jquery.arrive" JS to your project, https://raw.githubusercontent.com/uzairfarooq/arrive/master/minified/arrive.min.js

then call "jQuery(document).arrive('div.box [data-widget]', (element) => { $(element).parents('.box').boxWidget(); });" after ajax request.

[nizam6431]

i face the same problem :(

[REJack]

Is this issue still open in the latest version (v2.4.12)

[REJack]

Additionally: If you add a complete box via a ajax call you need to init the boxWidget on the box to collapse it after insert.

[016]

Similar issue: #1857
Solution:
Here again, on 2.4, the box can not be collapsed if they are loaded in ajax.
A automated test should be added to prevent this kind of bug in the future.
Current possible workaround waiting the fix, using the arrive component:
jQuery(document).arrive('div.box [data-widget]', (element) => { $(element).parents('.box').boxWidget(); });

in my VUE Project I just add $('.box').boxWidget() to mounted function, so the code can init all box in ajax switch pages, it's working good, thx for the infomation.

I was trying to add $('.box').collapse(), it's not working, so if u are using adminLET in VUEjs, try this, it will working good for u.