Responsive table design - Brainstorming

Thanks Sack, those are really helpfull.

Do u know if C8 templates are responsive ? I mean, at least in section and category view.

C8 list templates are not responsive.

A first approach might be a parameter for intro field display, based on a "visibility matrix" similar to the responsive utility classes from bootstrap (does not work for tables). See here

Another example: Gantry framework responsive support classes here

For the category list, the "default" template should be, but it seems it has a problem with 6 columns (have to investigate further). The Cobalt7 category list template is not responsive, but should work quite well, depending on the category title length.

In my case it would not be mostly associated to categories, since i will avoid the category list inside section display. My concern would be more directed to the record listing to be responsive...

I'm using a RT template that has gantry although visiting the links i understood little if anything.

I guess i will just have to wait...

By the way Elvery is an Universal CSS solution. Just add piece of CSS into yout template and it will work.

I tried the Script solution from ZURB Foundation on Cobalt default list (Table). No success. The wrapper DIVs are missing. the first column (title) is hidden. No scrolling. Unsure what is the culprit.

An easy start would be to wrap the table in a div container with overflow: auto

This would already help in providing a horizontal scroll bar and cobalt would not break the layout when resizing a responsive Joomla template.

Example:

This annoying behaviour can be avoided with the above mentioned solution.

Either wrap it in the list template or in the markup template (so it will cover automatically all list templates).

Result:

It does not break the layout anymore by inserting a horizontal scrollbar.

If it is inserted into the list template, then it should be conditional if the list template would be used for a relate field as well to avoid unnecessary scroll bars from the table (child list template) within the table (cobalt list template).

See i) here

Tried it with android v 4.04 and IOS 6.1.3 .. It does not have the scrollbar bar you can "scroll" by moving it left and right .. layout not destroyed

unlike my cobalt7 category listing which still breaks the layout --> have to wrap it also ...

Main reason to place the overflow was some complaints from encoders, that they could not access the table information while they used a smaller window, since they needed additional screen estate for other browser windows to verify data for encoding.

Now they can scroll. :D

Its a jungle out there!

I was even thinking of server side mobile-detect to decide server side already what to deliver and eventually save some content instead of hiding it with visibility classes.

Came across this article which may create a different perspective to the problem.