Responsive plugin always removes a column in Firefox

altreus

Irrespective of how wide my window is, the Responsive plugin always removes a column under Firefox. It respects the priorities when it does this.

The attachments show the exact same table in Firefox and Chrome; there are no JS errors. It can be seen that, at the same pixel width, Firefox decides to remove the lowest-priority column - in this case the ID column.

It is also noteworthy that this causes the plugin to remove the button that would normally be used to expand the row that contains the rest of the data.

    <table class="table table-striped datatable">
      <thead>
        <tr>
          <th>ID</th>
          <th data-priority="1">Profile Name</th>
          <th data-priority="2">Actions</th>
        </tr>
      </thead>
      <tbody>
        
          <tr class="site_11">
            <td>
              11
            </td>
            <td>
              <a href="http://localhost:5010/site/11/edit">Default Profile</a>
            </td>
            <td>
              <div class="dropdown">
                <ul><!-- snip --></ul>
              </div>
            </td>
          </tr>
        
      </tbody>
    </table>

    $('table.datatable').DataTable({
        responsive: true
    });

I don't think there's anything I've done clearly wrong, but also I don't see that anyone else has had this trouble. Any insight would be appreciated.

allan

Can you link to a test page showing the issue please.

Also it might be worth adding width="100%" to your table.

Allan

altreus

Apologies, this project is on a back burner at the moment and I've not had somewhere helpful to upload a test page to yet. The issue is still in our list, though, so I'll definitely be revisiting it.

altreus

Adding width="100%" did work. Without it, the following page collapses the "Start" column in Firefox, but not in Chromium.

http://altre.us/auctions/auctions.html

Adding width: 100%; to the CSS had no effect, however, meaning everyone must now know and remember that datatables exhibits this strange behaviour, and how to avoid it...

allan

This is correct. It is exceptionally frustrating that there is no good way to read a percentage value from CSS. The only option is to parse the stylesheet, but that is really very difficult. The only way to know if the table is width:100% is for the width attribute to be used, or style="width:100%".

Allan