Search code examples
javascriptcssadminlte

AdminLTE Expand or Fullscreen boxes

AdminLTE an Admin template based on Bootstrap.

I'm wondering if I can make box-widget to expand to a full screen mode (second button).

enter image description here

I'm looking if there is any CSS class or JavaScript tip to make this to work.

I didn't find such thing in AdminLTE docs.

Solution

  • I also ran into the same problem today. I did it this way.

    HTML

    <button type="button" class="toggle-expand-btn btn bg-yellow btn-sm"><i class="fa fa-expand"></i></button>

    CSS

    <style>
.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}
</style>

    JS

    $(".toggle-expand-btn").click(function (e) {
  $(this).closest('.box.box-warning').toggleClass('panel-fullscreen');
});

    Change the box and the button class according to your need and it will be fixed. Hope it will works.