CODEWITHSUNDEEP
twitter-bootstrap
skalidindi
skalidindi

Reputation: 173

Bootstrap modal overflowing my table row

See http://jsfiddle.net/9sjRh/

I have table in a modal but it is overflowing. I have playing css tricks with it such as changing the width of the modal or changing the margins. None of these seems to have worked. Any help would be appreciated.

HTML

<div id="classModal" class="modal fade bs-example-modal-lg" tabindex="-1"
    role="dialog" aria-labelledby="classInfo" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              ×
            </button>
            <h4 class="modal-title" id="classModalLabel">
              Class Info
            </h4>
          </div>
          <div class="modal-body">
            <table id="classTable" class="table table-bordered">
              <thead>
              </thead>
              <tbody>
                <tr>
                  <td>CLN</td>
                  <td>Last Updated Date</td>
                  <td>Class Name</td>
                  <td># Tests</td>
                  <td>Test Coverage (Instruction)</td>
                  <td>Test Coverage (Complexity)</td>
                  <td>Complex Covered</td>
                  <td>Complex Total</td>
                  <td>Category</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>

JS

$('#classModal').modal('show')

Upvotes: 11

Views: 30865

Answers (7)

Bamigboye Biodun
Bamigboye Biodun

Reputation: 1

For Overflowing Text you need to add this class

td{
white-space : normal;
}

bootstrap default class sets it to no-wrap causing the table to overflow when you have long text. This works perfectly

Upvotes: 0

Parzibyte
Parzibyte

Reputation: 1598

First thing: you must wrap your table in a div with the class table-responsive.

My problem was (in Bootstrap 3) that the div.table-responsive was inside a div.container, I put the div.table-responsive outside the div.container and it worked like a charm

Upvotes: 0

b0y
b0y

Reputation: 576

I am not sure if the issue is resolved or not but my solution is :

Append the below written CSS tag into your fiddle and get the thing done. 

.modal-body {
  overflow-x: auto;
}

You can find my JSFiddle here.

Upvotes: 18

Nils Renaud
Nils Renaud

Reputation: 584

The answer of user1707141 works. But Bootstrap has its specific class for your table : table-responsive

Documentation about this element here : https://getbootstrap.com/docs/4.0/content/tables/#always-responsive

Upvotes: 0

Nikhil Das Nomula
Nikhil Das Nomula

Reputation: 1953

I know its too late but this is what worked for me

Wrapped the table inside a div and added overflow:auto as a style

<div style="overflow: auto">
       <table class="table table-hover">

            <thead>
                <tr >
                   <th id="th1">Header 1</th>
                   <th id="th2">Header 2</th>
                </tr>
            </thead>

             <tbody>

             </tbody>

          </table>
</div>

Upvotes: 6

Najib
Najib

Reputation: 520

you need to override the style 8px to 5px or less 

 .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {

        padding: 5px !important; // currently 8px
    }

the syle is currently in bootstrap.min.css you may add the following style in your own css class.

Upvotes: 0

AyB
AyB

Reputation: 11665

Table tries it's best to fit the contents within the container, but if your text is too long it will be forced to override the container's width and spread. You can force it to still re-size within the container using table-layout:fixed but it will cause undesirable formatting like this.

If you have lengthy headers, I recommend you to follow the vertical header approach which looks like:

<tbody>
    <tr>
        <th>Heading 1</th>
        <td>Value 1</td>
    </tr>
    <tr>
        <th>Heading 2</th>
        <td>Value 2</td>
    </tr>
</tbody>

Have a look at the formatting I made here on your code.

Upvotes: 1

Related Questions