Tables with many columns not displayed correctly in iPhone.

[hifall]

I found that tables in Copilot with rows more than like 5+ are not displayed correctly on my iPhone -- some of the rows on the right are hidden, also I am not able to scroll the hidden rows into the viewport.

Please check the image below.

[hifall]

One can actually reproduce this on a desktop browser like Chrome. Just browse to: https://copilot.mistergf.io/, then minimize the width of the browser window to simulate a mobile browser, and you can see the same issue mentioned above.

[bernhardreiter]

@hifall, yes I've also noticed this behaviour. It seems to be a combination of datatables and bootstrap layout, as copilot tries to rebuild the AdminLTE template with vue (see https://github.com/almasaeed2010/AdminLTE) and AdminLTE has the same issue, I'd say that this is an upstream defect. Maybe you should file it with AdminLTE as well. ;)

[hifall]

Yes, thanks for your suggestion @bernhardreiter

Although untested, I've found some issues with potential solution in the AdminLTE project: https://github.com/almasaeed2010/AdminLTE/issues/1217 https://github.com/almasaeed2010/AdminLTE/issues/1303 https://github.com/almasaeed2010/AdminLTE/issues/1295

[hifall]

I found that this fix works: just add a class "table-responsive" to the table's enclosing div. Then the table becomes horizontally scrollable.

[bernhardreiter]

@hifall thanks for finding these upstream issues, we probably will find a solution for copilot in there. Does adding the class fix all redraw situations like mentioned in https://github.com/almasaeed2010/AdminLTE/issues/1295 ?

[hifall]

@bernhardreiter I did not perform comprehensive testing. But I tried a couple of times and found I was able to scroll the overflown columns into the view port, after adding "table-responsive".

[bernhardreiter]

@hifall I agree, this adding this class improves the behaviour on smaller screens. Thanks for the suggestion.