2016-11-01 4 views
1

私のモーダルはうまく反応していますが、私の行はスクロールバーを使うか、モーダルからオーバーフローします。私はそれらを反応的にすることはできません。私はいくつかの方法を試しましたが、私のモダールのテーブルをデータテーブルにする必要があるかどうか、あるいはそれをそのまま残すことはできません。私はDTと内部ではないと言ったように、それを試してみました。それがオーバーフローする場合私のモーダルテーブルの行に応答していない

<div id="dialog-confirm" class="modal fade" tabindex="-1" role="dialog" title="Cancelled Items" aria-labelledby="dialog-confirmLabel"> 
      <div class="modal-dialog modal-lg modal-sm" role="document" style="overflow:hidden;"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="btn-close close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        </div> 
        <div class="modal-body"> 
         <div class="row "> 
          <div class="col-sm-12"> 
           <table id="example" class="table table-striped"> 
            <thead> 
             <tr> 
+0

はあなたがクラステーブル応答性を持つあなたのテーブルが応答作ってみましたか?試してみてくださいhttp://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp –

+0

これは一番簡単なオプションのように思えたので、最初の試みだったし、何もしなかった。 – user1566783

+0

モーダルがどれほど小さくなってもテーブルの幅全体を表示したいですか? Bootstrapによると、テーブルレスポンスはテーブルを '小さなデバイス(768px以下)上で水平にスクロールさせるだけです。 'と私は考えています。これはデフォルトでは' modal-sm'と同じだと思います300pxに設定します。 http://codepen.io/yongchuc/pen/GjVeZr –

答えて

0

あなたのデータテーブルには、それにスタイルを与える

<div class="modal body"> 

のままになります:

<div class="modal body" style="overflow:hidden"> 

また、あなたが行うことができ

<div class="row " style="overflow:hidden"> 
    <div class="col-sm-12" style="overflow:hidden"> 

場合とあなたはスクロールしたい、

overflow-x:scroll 
    overflow-y:scroll 

それが助け場合、

おかげ

+0

これと同じ結果が得られます。メインのデータテーブルのように崩壊する代わりに、行がちょうど切断されています。 – user1566783

+0

スナップショットを置くことはできますか?また、class = "table table-striped"はオーバーフローします:hidden。 else(オーバーフロー:スクロール)ベストを期待して:-) – abcool

関連する問題