Show More button in filters isn't visible

Ask the Community General Questions
1

Hi Max, these are fantastic updates, and as was mentioned above - absolute game changers! Thank-you!

One problem I’m noting is that on the live site, not all of my filters are showing on the list under ‘search by type’ (only about 75% (the first 6) of the ones that are actively attributed on the backend, are showing as filter options on the live site).

There does appear to be a ‘hidden’ button underneath that if you click it, it displays the rest, but from a user perspective, they wouldn’t know to click randomly on the bottom of the page - it just appears as if half the options are missing.

Hoping you can help :slight_smile: (happy to move it offline and send photos if better/ helpful).

1 Like
Event Calendar: [MAJOR UPDATE] New filter design, tag filter, search bar and more! 🔥
2

Sam – I asked a similar question above, and they split into a new topic. To get rid of the “show more” for the hidden ones: Display all filter options without Show More button - #3 by Matthew7

Additionally, if you have no upcoming events under a certain category, it won’t show (as there is nothing to filter).

Those are the two things I can think would be happening for you!

3

Hi there, @Sam_Kirby :waving_hand:

The thing is that the color of the Show More button depends on the color of Active Filter. Since you’ve set transparent for the Active filters, the Show More button is invisible:

image
image329×496 7.83 KB
image
image332×391 7.8 KB


If you change the color of Active Filters, the button will show up:

image
image1395×849 51.4 KB


In case you wish to keep the active filters transparent and set a different color for the Show More button, this CSS will do the trick:

.global-styles,
.es-more-less-button-button {
  color: black;
}

We’ve also noticed that some event types and tags were cropped in the event cards on your website, and we’ve fixed it using this CSS code:

@media screen and (min-width: 1112px) {
  .eapp-events-calendar-list-item-infoContainer {
    max-width: 650px;
  }

  .eapp-events-calendar-list-item-name {
    text-wrap: wrap;
  }
 }

Let me know if it helped or if you have any questions left :wink:

1 Like