Optimize responsive tables

[dev7ch]

What steps will reproduce the problem?

In Luya Admin navigate to News > Categories and open e.g. Chrome inspect element toolbar

this happens on a 15" screen (macbook), if page width is less then 1280px

What is the expected result?

What do you get instead? (A Screenshot can help us a lot!)

This comes from the bs4 css class table-responsive usually its haves an effect under breakpoint sm ( less then 768px )

In compiled luya css we have

@media (max-width: 1280px) {
    .table-responsive {
     ...
    }
}

Why do we have this up to 1280px @luyadev/coredev ? is bootstrap overwritten for this case?

Suggested Solution

We should wrap tables into a div like:

<div class="table-scrollable">
    <table class="table"></table>
</div>

and add a styling like:

.table-scrollable {
    width: 100%;
    overflow-x: scroll;
}

This would give us a much more suitable control to responsive tables.

If it tables would be wrapped we could use the style display: inline-table for table to fix this issue.

The table wrapper could be also applied via js, just instead of add it manually in every html files.

Additional infos

Q	A
LUYA Version	dev-master

[nadar]

@dev7ch As far as i can see, we should keep the table="table-responsive" and optimize this class instead of adding something new. this way developers does not have to find some misc luya bs4 features somewhere.

• optimize the table-responsive class

• do not add new wrapping class (we also would have to add them everywhere!)

[dev7ch]

the bs4 table-responsive isn´t the best solution for responsive tables, if u search a bit on the web u ll quickly get it.

1. actually its not more optimizable, we could only reduce the breakpoint, but i guess there is a reaseon why the breakpoint was changed

2. wrapping could be done via js or jquery, so developers use this feature just on the flow

[nadar]

• we will not work with additional wrappers, this should work out of the box according to bs4 usage guide
• we are using angular, maybe you can watch all tables which habe the class table-responsive and wrap them but currently i am not sure how to watch all tables without creating an directive you have to apply on all tables.

[dev7ch]

• ok, but the case i meant is not at Bootstrap tutorial and does not work out of the box (tested on bs4 docs website)

• sure, agree we have to check properly

explanation:

if we have a table-responsive wich contents are less then 100% width the table isn´t stretched as it should.

This can be only done with a wrapper as a far i can see.

[nadar]

@TheMaaarc so we should take care of this problem, maybe we can only use this wrapping div for the CRUD table?

[nadar]

@TheMaaarc Please add this table-responsive wrapper informations to the docks.

[TheMaaarc]

If everything is OK we can close this issue.

[nadar]

@dev7ch @TheMaaarc keep the issue open for a while so we can test the changes and see if some unexpected behaviors appear.

[nadar]

Chromium, Ubuntu: Now i have a scrollbar on each ngrest crud table

[dev7ch]

👍