Overriding styling of list filters

[johnonorvic]

I have added some filters to a list, which was easy and worked straight away. There is just one problem; the filter select boxes are right justified in the columns, whereas the fields of the records below are left justified. It would look better (to my eyes) if the filter boxes were left justified as well. The debugger showed that this was caused by the css defined for the style listfilter specified for the div that contains the filter box being “text-align: right”. This is in /media/com_fabrik/css/fabrik.css and I can edit that to “ text-align: left” to get what I want. I tried putting an override in user.css instead, but that had no effect; the debugger showed that fabrik.css overrode user.css. Is there a “proper” way to get the required effect?

 

[troester]

I can't find this class in my list's page source. Are you running a F4 list template or some custom one?
Anyway
You can add custom css in your Fabrik list template via custom_css.php
https://fabrikar.com/forums/index.php?wiki/custom-styling-a-list/

or you can add some more specific CSS to your user.css.

 

[johnonorvic]

Are you running a F4 list template or some custom one?

As far as I am aware, I am using standard J4/F4 with the Cassiopeia template. The only template changes I have made are a few minor adjustments with user.css.

The div that contains the select for each filter seems to be created by code in default_headings.php. Line 46 is:

<div class="listfilter<?php echo $required; ?> pull-left">​

The file appears twice in my system at locations:

components/com_fabrik/views/list/tmpl/bootstrap/default_headings.php
templates/cassiopeia/html/com_fabrik/list/bootstrap/default_headings.php​

Its source is:

pkg_fabrik_4.0delta.zip\com_fabrik_4.0delta.zip\site\views\list\tmpl\bootstrap\default_headings.php​

The only css for listfilter is in fabrik.css. Line 5 is:

.listfilter {

text-align: right;​

}​

The file is at:

media/com_fabrik/css/fabrik.css​

and its source is:

pkg_fabrik_4.0delta.zip\com_fabrik_4.0delta.zip\media\com_fabrik\css\fabrik.css​

or you can add some more specific CSS to your user.css.

As I want to make only a small change, I thought that was the best way. I tried it, putting:

.listfilter {
text-align: left;
}​

in user.css, but it had no effect. In the debugger, the window for the element's CSS and its sources (which usually has user.css at the top) had fabrik.css above it and having the last say, so the code I had added to user.css was overridden and had no effect.

I do not know where the CSS evaluation order is determined, but should not user.css come last?

 

[wezetel]

templates/cassiopeia/html/com_fabrik/list/bootstrap/default_headings.php

This is an override of fabriks default.
I would try to rename this file and see what happens

 

[troester]

So you have filters set to "under heading"? (Better mention such non-default settings)

Yes, I think "text-align:right" doesn't make much sense.
You can override this setting in your user.css with e.g.
.fabrikFilterContainer .listfilter {whatever}
(this CSS is more specific)

BTW: If you use overrides (bootstrap template in cassiopeia/html...) you won't get F4 changes on this template.

 

[johnonorvic]

You can override this setting in your user.css with e.g.
.fabrikFilterContainer .listfilter {whatever}
(this CSS is more specific)

That works; it gets the CSS evaluation in the order I want. I suspect the rules for evaluation order are complex. A useful trick I will add to my heap of notes.

This is an override of fabriks default. I would try to rename this file and see what happens

BTW: If you use overrides (bootstrap template in cassiopeia/html...) you won't get F4 changes on this template.

I am not intentionally using the bootstrap template in cassiopeia/html… The two files were identical and both had the same date as all the other files from the F4Delta upgrade. To find out what is happening, I modified both files, adding, to the HTML to be returned, a rubbish class in one and a morerubbish class in the other. The list still worked and the debugger showed that the templates/cassiopeia version was used. I then changed the filename of that version. Again, the list still worked, but the debugger showed the components/com_fabrik version was used. Since the two versions are identical and seem to have been installed at the same time by the Delta upgrade, I presume having both will not be a problem and less risky than removing one.

Thanks to you both.

 

[troester]

Since the two versions are identical and seem to have been installed at the same time by the Delta upgrade

No, Fabrik doesn't install anything in your Joomla template.
Maybe you played around with custom templates (to do an override in your J! template is one method mentioned in the WIKI but I won't recommend, it's to easy to forget that it's there).

You should delete the
templates/cassiopeia/html/com_fabrik/ folder
if you don't have anything in it intentionally.

 

[johnonorvic]

Apologies for not replying sooner; I did not have time to, before going somewhere with no internet.

I think I probably created the override inadvertently when first trying to get the override in user.css to work; one or two things may have been tried at random without proper understanding – never a good idea!

Removing the templates/cassiopeia/html/com_fabrik/ folder (to a safe place) caused no problem.

Thanks for your help.