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

Issue type:

• Feature request
• 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.

[Mokette]

Hello 😃 still facing the issue 😒 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,

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