ハイチャートグラフがブートストラップボックスに埋め込まれない

Question

ブートストラップAdmimLTEテンプレート内にハイチャートグラフを表示しようとしています。 コンテンツクラスセクションを使用して、内部にハイチャートグラフを含むボックスクラスを保持しています。

<section class="content"> 
    <!-- Default box --> 
     <div class="box"> 
     <div class="box-header"> 
     </div> 
     <div class="box-body"> 
      <div id='chartID'></div> 
     </div> 
     </div> 
</section> 

adminLTEテンプレートなしでチャートを使用している場合、私は、このjfiddleで見られるような100％に高さを設定することができます：私はadminLTEテンプレートでチャートを配置すると、高さ属性がhttp://jsfiddle.net/wkkAd/149/

ですボックスの100％に合うようにグラフのサイズを変更しません。 高さを変更できる唯一の方法は、グラフの高さをパーセンテージではなくピクセル単位で手動で設定することです。 ハイチャートのドキュメントでは、チャートの要素を含む高さを設定する限り、グラフの高さは動的に設定されています。ポジションが絶対的な場合は、固定された数値であっても、パーセントであってもかまいません。

ボックスクラスの既定の高さは既に100％ですが、ボックス本体を100％に設定しても機能しません。

ボックスやボックスボディクラス内のコンテンツをすべて100％作成する方法に関するアイデアはありますか？クラスbox-bodyとdiv要素で

Answer 1

highchart divの。だから、最終的なレイアウトがテーマで、余分な変更を加えることなく上記のレイアウトで

<section class="content"> 
    <!-- SELECT2 EXAMPLE --> 
    <div class="box"> 
     <div class="box-header with-border"> 
     <h3 class="box-title">Select2</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> 
      <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i> 
      </button> 
     </div> 
     </div> 
     <!-- /.box-header --> 
     <div class="box-body"> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12"> 
       <div id="container" style="width:100%;margin: 0 auto"></div> 
      </div> 
     </div> 
     <!-- /.row --> 
     </div> 
     <!-- /.box-body --> 
     <div class="box-footer"> 
     Visit <a href="https://select2.github.io/">Select2 documentation</a> for more examples and information about the plugin. 
     </div> 
    </div> 
</section> 

私のサンプルになり、その後、クラスrowとクラスcol-lg-12 col-md-12 col-sm-12とのdivにdiv要素を追加します（クロームブラウザ）

Answer 2

さて、私はこれはタスクを達成するための最良の方法ではないかもしれない知っているが、同じ問題の多くのレビューを読んだ後、I私のために働く解決策になった。 これはうまくいかないかもしれませんが、ブートストラップを使用している場合は試してみることもできます。

$(window).resize(function(){ 
    $('#chartID').height($(window).height() 
        - $(".navbar").height() 
        - $(".main-footer").height() 
        - $(".main-header").height() 
        - $(".box-header").height() 
        - $(".box-footer").height() 
        - parseInt($('#cws_blocks').css("margin-bottom")) 
        - parseInt($('#cws_blocks').css("margin-top")) 
        - parseInt($(".main-sidebar").css("padding-bottom")) 
        - parseInt($('.content').css("padding-bottom")) 
        - parseInt($('.content').css("padding-top")) 
        - parseInt($(".main-footer").css("padding-bottom")) 
        - parseInt($(".main-footer").css("padding-top")) 
        - parseInt($(".box").css("padding-bottom")) 
        - parseInt($(".box").css("padding-top")) 
        - parseInt($(".box-header").css("padding-bottom")) 
        - parseInt($(".box-header").css("padding-top")) 
        - parseInt($(".box-footer").css("padding-bottom")) 
        - parseInt($(".box-footer").css("padding-top"))      
        ); 
    }) 
    $(window).resize(); 

また、これはビットオーバーキルかもしれませんが、現在ではそれがうまくいくソリューションです。私は基本的にハイチャートdivの高さを、グラフの上下の要素の高さとパディングを引いてリサイズします。 グラフのみがページ上にある場合に機能します。 また、応答します。パソコンでテストする、モバイルではない。

誰かがこれを行うより良い方法を知っている場合は、更新してください。

はこちらこのトリックを発見し、私のために動作するように修正：更新のhttps://github.com/twbs/bootstrap/issues/1671