Make tables responsive

[SharkyKZ]

Currently, Joomla hides many table columns in the backend to keep the site responsive on smaller screens. This can be a considerable usability issue. To solve this, tables could be made responsive and elements unhidden. Seeing the discussion at #10237, responsive CSS could simply be added on top of Bootstrap CSS, making all tables responsive.

This simple snippet could be used:

.table {
display:block;
overflow-x:auto;
}

[brianteeman]

Is it really better to have a super wide screen that you scroll horizontally? Do we really want someone to be able to do everything when they are on their phones?

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10251.}

[mbabker]

You'd honestly need something like the table-responsive class from Bootstrap 3, which is a lot more complex than that and IMO doesn't really improve things all that much (I've used it in a theme before and it caused me more headaches than it was worth trying to use it, plus our table cells had dropdown buttons which just made things worse).

Hiding data isn't exactly the best alternative, but to me it's the better choice right now (well, actually, only choice given the lack of responsive tables).

[SharkyKZ]

This is what's now used in Bootstrap 4. Seems to be the only thing related to responsive tables:
.table-responsive{display:block;width:100%;min-height:0.01%;overflow-x:auto}
Even if columns remain hidden, could this be added as a cosmetic change? In some views (e.g. articles) on medium screens (e.g. 768px or 800px) tables tend to extend out of viewport.

Another concern related to this is lack of ordering options on mobile. Since column headers are used for ordering, hiding them removes the ability to order items. But I guess this would be better solved with search tools as mentioned in #9031.

[mbabker]

https://github.com/twbs/bootstrap/blob/10606a73bcbfc6c723d60e2a1069c921afff0d2a/less/tables.less#L171-L234

It's a bit more than that one class because it's also propagating down to sub-elements.

And I'd still suggest personally that using table-responsive not be the preferred choice having used it and experienced its headaches on production Bootstrap 3 based sites. It's great if you really want to show the whole table and keep things responsive, but IMO its usability just sucks (I've had too many issues with trying to scroll and the responsive table caused unwanted behaviors plus with the core's use of dropdown buttons for actions those will eventually hit the same issue tooltips have with being clipped in modals and AFAIK you get into z-index hell to try and fix that). Those same concerns are why I elected to go with hidden cells on https://framework.joomla.org/status instead of a responsive table.

[SharkyKZ]

That's from Bootstrap v3, not v4. But you're right, dropdowns and tooltips won't work properly without a positioning library. Maybe something to consider for Joomla 4? Speaking of which, will Joomla stick with Bootstrap or not? I've seen conflicting responses about this.