• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

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

Indrit

Member
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
 
Last edited:
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.
 
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:
Code:
@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.
 
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
 
We are in need of some funding.
More details.

Thank you.

Staff online

Members online

Back
Top