2016-06-13 6 views
0

AdminLTEBootstrapに基づく管理テンプレート。AdminLTETE Expand or Fullscreenボックス

box-widgetをフルスクリーンモード(2番目のボタン)に拡張できるかどうかは疑問です。

enter image description here

これが機能するようにする任意のCSSクラスまたはJavaScriptの先端がある場合、私は探しています。

私はこのようなことをAdminLTE文書で見つけられませんでした。

答えて

0

上のアイコンを変更。 私はこのようにしました。

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

変更ボックス、ボタンクラスのあなたの必要性に応じて、それが修正されます。 うまくいくと思います。

0

フルスクリーンモードを取得するためにブートストラップクラスを使用できます。

+0

どのBootstrapクラスですか? –

+0

col-xs-12/col-md-12 – Vikram

0

オープンボックス:<div class="box">

Aはボックス崩壊:<div class="box collapsed-box">

をそしてofcourseの私は今日も同じ問題に遭遇したボタン

+0

私はすでに開いている/折り畳まれたモードを持っています。私は全画面でウィジェットを切り替えるのを探しています。私はウィジェットの内容をフルページで表示したいのですか? –