Isotope Filter Classes issue

Design help Custom code
1

Hi all,

I am hoping someone can assist me with this issue. I just finished a site for a new medical staffing company, with a CMS in place for them to add the job listings, and used Isotope on that page to allow live filtering of the listings based on State, Region, or Specialty.

http://advantismed.webflow.io/opportunities

If you click the Specialty filter though and click through them, you’ll notice that only filters/categories/classes (however they would be called in this instance) with ONE or TWO words correctly show. Anything more than that disappears. Even Medical-Surgical (M/S) disappears.

I contacted the folks at Metafizzy and they responded that the classes being assigned to the data-filter for each of the filter button embeds, is not correct. They don’t match the classes Webflow is attaching to the job listing panels.

This is something the client strongly needs to have functioning, but I can’t find any guidance on this. It’s not something Webflow staff can really help with as it’s an embed, but it’s also not something Metafizzy can fix because the issue lies with the class names assigned to the CMS items on the finished page not being correctly hyphenated or named.

If anyone out there can solve this, please do let me know — and by all means contact me off the list at steve@energi.design where I’d be most happy to pay for the time to fix this issue, so that the client can use this filter (which works perfectly for State and Region, by the way).

Here is the share-only link:

https://preview.webflow.com/preview/advantismed?utm_source=advantismed&preview=2051db42a593b7683be7cfb6a9bc7b4b

Thank you!

Steve

2

First, The “(” “)” - parentheses are not allowed on class names ( They are reserved for functional like: nth-child())).

https://stackoverflow.com/questions/5478920/are-parentheses-allowed-in-css-selectors/5478943

Wrong Filter

Button filter

<button data-filter=".cardiovascular-intensive-care-unit-cvicu">click</button>

(Like saying show me only a div with class of .cardiovascular-intensive-care-unit-cvicu).

The element

Its hard to know what specific value you want to filter. Anyway for example:
Under this div you put 6 multiple classes (Read under “CSS-Tricks”):

  • cardiovascular-intensive
  • care
  • unit
  • (cvicu)
  • illinois
  • midwest
<div class="cardiovascular-intensive care unit (cvicu) illinois midwest">
Filter me
</div>

The selector in this case it:

.cardiovascular-intensive.care.unit.(cvicu).illinois.midwest{
/* styles her */
}

This is not the same (Your filter only select element with this class):
<div class="cardiovascular-intensive-care-unit-cvicu">This is correct</div>

This is why only short names works fine for you (The long names are with wrong data-filter). Example under SPECIALTY “clinic” works fine.

Solution (maybe)

Correct data filter.

<button data-filter=".cardiovascular-intensive.care.unit.(cvicu).illinois.midwest">click</button>

summary

No way to solve this by forum Q (A freelancer job).

3

Hi Ezra,

Thanks for the response and information. I know that the names aren’t allowed parentheses, but they are required in the filter button on the page to be recognisable.

But even then, I have gone in and removed the letters and parentheses and still get the same error - specialty filters longer than 2 words don’t filter.

If I go into the cms collection for states, for example, and change North Dakota to North West Dakota, then it breaks.

Then, knowing that the classes are being incorrectly assigned to allow filtering is one thing - but those classes are being added automatically and not manually by me (if they were, this would be easier to isolate and fix), so I don’t understand how to fix this issue.

And that’s all I’m really trying to figure out - how to fix this.

Thank you for any more insight you may be able to offer.

Regards,

Steve