Responsive CSS on my list is not working

[githinji84]

Guys,

I am new to Fabrik and would really appreciate your assistance. I want to hide some columns on my list so that they do not display in the phone view. I am going to the List>Layout>Responsive CSS, then I select the element I want to hide and select class "Hidden Phone" then save and refresh my front end; but nothing is happening, the column is still visible on the phone. I have tried hiding columns on desktop view too but the columns are still being displayed.

Am I doing anything wrong? Is this the right process or have I skipped a step. Any suggestions are welcomed

Regards
Simon

 

[troester]

Which Joomla template are you running?
Fabrik is using Joomla's Bootstrap2 framework (try the Protostar template coming with Joomla).

 

[githinji84]

Troester,

Thanks for the reply. Protostar is indeed working. I was using Helix 3 and I Joomshaper say that it is a bootstrap template. I know many Fabrik users also use Helix 3. Have you seen this as a common problem and is the only solution to switch templates. I have really invested a lot on developing my application with Helix 3 as the main template and was hoping not to undo that work. Is there any other workaround?

Regards
Simon

 

[troester]

Is this Bootstrap3?
Did you https://github.com/Fabrik/Fabrik-Joomla-alt-layouts ?

Maybe this hidden-phone has not been included in this overrides.
As a workaround you can add this CSS class to your media-queries.

 

[githinji84]

Hi, I have tried to add the bootstrap 3 files as indicated in the link. Since I am not using Purity iii or Uikit templates I have created a com_fabrik folder in helix 3 template folder and copied the boostrap 3 files here. Unfortunately there was no change and I still have the issue. Is this the right way to do this?

 

[githinji84]

Hi troester, I changed my template to purity III and now this issue has been resolved

 

[NickC4555]

If your template is running Bootstrap 3, hidden-phone has become .hidden-xs. There is a full list of updated classes here: http://getbootstrap.com/migration/

 

[remico]

I Know this is an old thread but for people with the same problems I have a very easy solution for quick fixing bootstrap classes... There is an (free) Joomla Extension called ReReplacer from RegularLabs (formaly known as NoNumber). With this tool you can search and replace everything in a page inluding the source (also class names) So you can easaly make a rule to replace hidden-phone with hidden-xs and it works instantly without making any coding or css changes (update friendly) Also check out his other utilities, very good and solid coding!

https://www.regularlabs.com/extensions/rereplacer