reactive-table icon indicating copy to clipboard operation
reactive-table copied to clipboard

table-responsive not being respected

Open cyounghusband opened this issue 9 years ago • 1 comments

Hi, First of all, I LOVE this package. Using it a lot.

I've run into an issue with responsive use. It seems like class="table table-responsive ..." is ignoring the table-responsive attribute completely. Has anyone else seen this?

If I surround my reactiveTable template invocation with a

, the table does become responsive, but I get an annoying horizontal scroll bar even on full sized displays, which moves only a whisper right and left. When I inspect it with the Chrome dev tools, I can see the bootstrap table-responsive is referenced but nonetheless a mobile user can't get to the right side of the table at all.

My bootstrap/CSS knowledge is not deep, suggestions appreciated! Thx

cyounghusband avatar Feb 19 '16 09:02 cyounghusband

The problem is that bootstrap's table-responsive class is supposed to go on a div that wraps the table element, and the class option will put it on the table element itself. reactive-table doesn't put a div around the table element, but you might be able to do something like $("table.reactive-table").wrap("<div class='table-responsive'></div>"); when the template is rendered to add one.

Glad you like the package :)

aslagle avatar Feb 20 '16 23:02 aslagle