Bug in exposed filters theming

I recently implemented a view in my new D8 site, which exposes a lot of choice filters.

What I expected is just a bunch of select lists or checkboxes to filter the results on the table generated by the view.

What I got instead is the bunch of select lists, but the first select list looks suspiciously like a search box:

So I checked the CSS and oh, surprise!, the CERN BASE theme assumes that every time one adds exposed filters to a view, the first one will necessarily be a search box!

/* Some align and display specifics here */
.cern-page-display-page .views-exposed-form .form-inline .form-item:first-child, 
.cern-view-display-page:not(.view-general-search):not(.cern-view-display-resources):not(.resources-mosaic):not(.cern-view-display-feature_events):not(.cern-view-display-past_events):not(.cern-view-display-all_news):not(.cern-view-display-faq_page):not(.cern-view-display-page_taxonomies) .views-exposed-form .form-inline .form-item:first-child {
    display: block;
    text-align: center;
    position: relative;
}

/* Here goes the lens icon! */
.cern-page-display-page .views-exposed-form .form-inline .form-item:first-child:before, 
.cern-view-display-page:not(.view-general-search):not(.cern-view-display-resources):not(.resources-mosaic):not(.cern-view-display-feature_events):not(.cern-view-display-past_events):not(.cern-view-display-all_news):not(.cern-view-display-faq_page):not(.cern-view-display-page_taxonomies) .views-exposed-form .form-inline .form-item:first-child:before {
    content: 'O';
    font-family: "cern-icons";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    left: 8px;
    width: 25px;
    height: 25px;
    top: 8px;
    text-align: center;
    line-height: 21px;
    font-weight: 500;
    padding-right: 2px;
    font-size: 46px;
    color: #0855a0;
}

Except of course, for a few very specific and exclusive views which need to match the class names in the super-long selectors…

I think this needs to be checked and fixed. Also, patching it via an override theme requires rewriting the full chain of selectors, so it’s not a good permanent solution.

When I have time, I will fix it on the CERN BASE theme myself, and submit a pull request (can we actually do this? :slight_smile:)

In the mean time, a workaround can be to write the same rules on an override theme setting each property to default, unset, or whatever the value is on the general styles defined for exposed filters, or simply add a search box as the first exposed filter :man_shrugging:

Let me know what you think!

Hi Oscar,

For sure, you can do a PR at Web Team / Drupal / Public Drupal Repositories / Drupal 8 / D8 Themes / cernbase · GitLab

Cheers,
Ismael

Hello @ogomezal,

Thank you for mentioning and for the contribution! It was a known issue so I am glad that you found time to solve it. The actual issue is that the first exposed filter is always displayed with width: 100% and it also has the lens icon. The Idea is to keep these settings only if the first filter is of type text input. In other words the design makes the assumption that the first exposed filter is always text input and obviously its not always the case.

As @iposadat already mentioned you can create a Merge Request, I just have to give you Developer access in the repository so that you can create a branch and merge request to the dev branch

Just a small note: Can you please render them using scss in order to keep consistency?

I will make sure to include you in the contributors list too.

Kostas

1 Like

Hi @kplatis,

thanks for the access rights! I will work on these things little by little since I have already a lot going on, but I will be happy to send some merge requests your way sooner rather than later :slight_smile:

I will use SCSS for sure, no worries!

PS: I also created a js-refactor branch on cernbase to fix some JS issues, related to integration with Drupal JS framework, optimization of code performance, maintainability and readability and fixing bad code practices and typos, but I will only send a merge request after I have tested it thoroughly.

Regards,
Óscar

1 Like

Hello,

I’m happy to see I am not alone with this :slight_smile:
I was wondering how I would change this behavior in my page since I was requested to.

This is my Drupal 7 page:

And this is in Drupal 8:

I see first field is always 100% width so I would be very happy if that behavior is removed. In my case, first field is also a text field so I understand you will keep 100% width for the first field.

Will you finally keep it or will it be changed eventually? If not, I could just change this in my CERN override theme probably affecting something else , right? (.form-item.form-type-textfield:first-child)
Any other suggestion?

Thanks,
Juan

Hello Juan,

The rules of the exposed filters are defined as follows:

  • If the first exposed filter is of text type, then it holds 100% of the width and the rest of the filter share the rest of the space
  • If the first exposed filter is of any other type, the it shares the space with the rest of the filters.

For example lets say that I have the following filters: Text field, Select field, Date field. Based on the order, a different width is applied:

If the text field is first…

  1. Text Field: 100%
  2. Select Field: 50%
  3. Date Dield: 50%

If anything else is first…

  1. Select Field: 33%
  2. Text Field: 33%
  3. Date Field: 33%

This is the expected behaviour. If you have this configuration but still the fields are not rendered like that then it is a bug.

It was implemented like that because the first text field is reserved for a long field like for example a title.

If you have a better solution, feel free to propose it and we can see how it can be incorporated. Also if you do not like a specific style you can always override the theme.

Hope that helps.

Konstantinos

Hi Konstantinos,

Ok I see now how it works. I wouldn’t ask you then to change that logic since it will probably affect some others.
In my case, I only have text fields so I will override with ‘width: auto’.
I also thought about adding a previous field (select/date/…) but then I need to hide the new field.

Thanks
Juan