AdminLTE Развернуть или Полноэкранные окна

Question

AdminLTE шаблон администратора на основе Bootstrap,

Мне интересно, смогу ли я сделать box-widget развернуть в полноэкранный режим (вторая кнопка).

Я смотрю, есть ли какой-либо класс CSS или совет JavaScript, чтобы заставить это работать.

Я не нашел такую ​​вещь в AdminLTE Docs.

Answer 1

Я также столкнулся с той же проблемой сегодня. Я сделал это таким образом.

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

Измените поле и класс кнопки в соответствии с вашими потребностями, и это будет исправлено. Надеюсь, это сработает.

Answer 2

Открытая коробка: <div class="box">

Свернутая коробка: <div class="box collapsed-box">

А потом конечно поменяй иконку на кнопку

Answer 3

Вы можете использовать Bootstrap Class для получения полноэкранного режима.