Are Fabrik form and list built on a responsive design. Do they adapt to the devices I see it with?

[Indrit]

Hello, I have created and published a form and i was testing it on different devices
1. Laptop
2. iPhone,
3. Ipad

My questions: Are Fabrik form and list built on a responsive design? Do they adapt to the devices I see it with?

When i switch and see my list in an iPhone it does not re-adjust all columns and fit the screen instead the list is cut off and only see part of it. (NOTE: My list has 14 columns, and on the iPhone I only see the first 3-columns and the rest dont show at all, instead as re-adjusting and shown underneath each other.)
Additionally, the drop-downs on the form extend beyond the iPhone screen? I wish the drop-downs and its text could "wrap-text" so that it could fit the screen no matter the device.

Any suggestion where to look for and twick something will be greatly appreciated.

Thanks, Indrit

 

[lousyfool]

Lists based on Fabrik's default "bootstrap" template are HTML tables, which are not responsive by nature. You could either enable horizontal scrolling for such tables with CSS, or build your own responsive custom template e.g. based on the Fabrik "div" list template.

Dropdown lists eventually exceeding the screen is also an HTML thing, and "wrapping" the options in a select element is not possible. Users are required scroll through the options if it's too many to fit on the screen.

 

[juuser]

For list you can also show/hide elements depending on users screen width. For that, in the element settings -> List view settings -> Filters, there is an option "Class" where you can select when the element is visible to user.

Or you can do it also in List settings -> Details -> Layout -> Responsive CSS.

You can also use CSS-media queries in your list custom css file, e.g. like:

@media screen and (max-width: 768px) {
     th.table___element1, td.table___element1, 
     th.table___element2, td.table___element2 {
            display:none!important;
      }
}

@media screen and (min-width: 769px) and (max-width: 1366px) {
      th.table___element2, td.table___element2 {
            display:none!important;
      }
}

For forms you have to impelement custom template. You can wrap element row in div with a display:flex; etc. so the label and element would wrap with smaller screen width. This needs a bit HTML/CSS/PHP knowledge.

 

[troester]

For the list:
As @lousyfool said HTML tables are not really responsive but you can set some max-width + wrapping for columns ( often a column containing email addresses is far to wide because the emails don't contain a standard "whitespace" for wrapping).
Depending on what you need you can also use the div template (resp. a custom template starting with a copy of the div template) to get a catalogue like list.

In forms you can use the group's column settings to get the elements in multiple columns on wide screens and one under the other on small ones.

For many elements you can define a bootstrap (2 or 3) class for its width.

It depends on your Joomla template how the Fabrik classes are rendered. Standard is still Bootstrap2 (like the standard Protostar template coming with Joomla).
See e.g.
http://fabrikar.com/forums/index.php?wiki/prerequisites/#fabrik-3-4-2 for Bootstrap3 (and4) Joomla templates
http://fabrikar.com/forums/index.php?wiki/index/#designers for custom CSS and custom templates