Join the Webstudio community

Updated 7 months ago

How to add "data-" property to an element?

At a glance
I want to implement this CSS only filter function that I found on CodePen.

https://codepen.io/dereksheppard/pen/LYVWpoE

After replicating everything for the radio-filter part, I think the inability to add "data-category" is causing the problem.

https://apps.webstudio.is/builder/633ff612-cd0e-48b3-bc91-2ac812c6b5d7?authToken=1a3b452e-64d0-445e-80e4-4ae39f32c3dd&mode=preview

Am I doing something wrong?
Attachments
Screenshot_20240715_235119_Samsung_Internet.png
SmartSelect_20240715_234920_Samsung_Internet.png
O
N
16 comments
there is no inability
it literally tells you create "data"
I tried creating "data-category" but it doesn't work πŸ€”
pretty sure it does, maybe its confusing because we currently turn data-category into Data Category in the label?
we will fix this soon
Not the label. It's just not functioning with cards created in webstudio. Cards created in HTML code work just fine.
I'll try some things and check again.
pretty sure its working
Hello again,
Sorry for summoning this thread again but could you please check if this page works?

https://apps.webstudio.is/builder/633ff612-cd0e-48b3-bc91-2ac812c6b5d7?authToken=1a3b452e-64d0-445e-80e4-4ae39f32c3dd&mode=preview

The goal is to filter and show the cards according to the radio button clicked.
It doesn't work on my end. I want to know where the problem is.
hi, can you tell specifically what is not working?
i opened it and I see no script in html embed
so not sure why its supposed to be working
I tried to explain how I setup the filter mechanism. And I wonder why the code is not showing up on your end.
So right now, I think either I haven't setup the radio buttons properly (label and the ID) or I'm doing something wrong with attaching the data-category property.
oh you are doing it with CSS? this one is there
this is quite a complex CSS, I don't have time right now to debug it, I would recommend making a minimal test on some separate playground
Add a reply
Sign up and join the conversation on Discord