sematable icon indicating copy to clipboard operation
sematable copied to clipboard

custom styling of container classes breaks behavior of page size + search components

Open pgoldweic opened this issue 8 years ago • 0 comments

I noticed that with custom settings for the page size + filter containers - to ensure that the pagesize + search are displayed in the same row- (e.g. col-xs-6 instead of 'col-md-6', which is the default ), and at certain window widths, the table itself does not show up (it does show at xs width, md and lg, but apparently not in between). After looking at the source I realized that the TableComponent and Pagination components always use a 'col-md-12' for their respective containers. Does this explain the behavior I'm seeing? And if so, could a custom classname (configuration) for the table + pagination components resolve it?

An update on this after looking even more closely: I've noticed that all the components in the sematable (pagesize, filter, table and pagination components) are being rendered in the same row, and I wonder whether this is the real cause of the behavior I mention above. If so, possibly switching your render to using 3 rows instead (1 for the page size + filter, 1 for the table, 1 for the pagination) could resolve it, even if you did not add any extra configuration options?

NOTE: I am using Bootstrap 3

UPDATE on 5/1/2017: The symptoms for this problem have now changed. When I use custom container styling for the page size + search components (with either 'col-xs-6' or 'col-sm-6'), I now see their respective behaviors broken (both page size + search display but do not work at all) when the window size is reduced. Note: I am using version 1.4.4 of sematable.

pgoldweic avatar Feb 13 '17 18:02 pgoldweic