Forum Academy Marketplace Showcase Pricing Features

🔥 Classify: A tiny plugin that brings CSS power to Bubble

it worked!! thx !

3 Likes

Nice!

1 Like

hey @pierre6, @opaper and other developpers,
I just released a new free plugin to help fixing responsive height issues. Have a look!

2 Likes

Hi,
I tried to use “position:sticky” to create a sticky header once the user scrolls past the element - it did not work however.

Was anyone able to use (position: sticky) on an element? Or has anyone an idea why it is not working? :slight_smile:

Thanks in advance for the help.
Maze

There could be numerous reasons why it’s not working. As this article explains, one of the reasons could be that your sticky element does not have sibling elements to “stick over”. In Bubble, all elements we put on page are wrapped inside a “box” group and those groups inside a “line” group; It’s how the engine achieve its responsive behaviour.
Depending on the complexity of your page, if your header is nested into a group that is nested into another group, that adds a lot of levels, so your sticky element is alone in its place.

I think you’d be better off with javascript; something like if the distance between my header and the top of the page is less than scroll distance, make the header's position fixed on top.

1 Like

Hey Julien,

Running into a problem which you may have a solution for.

Enjoying Classify btw!

Merci :grin:

It was made to be enjoyed :wink:
I just dropped a quick reply on your thread…

1 Like

Hi Julien and thank you for this cool plugin.

I would be really interested if you could point me or show an example of workflow changing the attribute to add a remove a class dynamically :slight_smile:

Thank you

Hey @julienallard1 !
I’m looking to add custom properties to my HTML elements. Would this plug-in solve that problem?

For instance in the source code of my app I want it to look like
Screen Shot 2022-03-24 at 3.12.43 PM

Thanks!

@bubblealex
Classify only allows to alter the class attribute of elements. It can help if you want to add custom attributes to elements referred to by class:

document.querySelectorAll('.myClass').forEach(elm => {
    elm.dataset.itemprop = 'name';
});

Is there a way to use “scroll-snap” in Bubble??

I never used that rule, but I can’t see why you couldn’t; after all Bubble is just a website…

hey @maxencepautre, sorry I overlooked your question.
Classify doesn’t have workflow actions to add/remove classes. Instead you can use conditions under the condition tab from the element’s property panel.

If though, in your use case, you need to alter an element’s classname form a workflow here are 2 solutions (I recommend the first):

  1. Give your element a unique ID and use a Run javascript workflow action from the plugin Toolbox to add/remove classes by referring to the ID:
// Add a class:
document.querySelector('#elementID').classList.add('myClass');

// remove a class:
document.querySelector('#elementID').classList.remove('myClass');

// Toggle a class (add if absent or remove if present):
document.querySelector('#elementID').classList.toggle('myClass');
  1. Add as Class List custom state to your element, with conditions that add/remove classes through the ID field. Then, in your workflow simply add/remove the name of the classes from/to the custom state list and the conditions will replicate the list content to the classname.
1 Like

@julienallard1 This is the documentation I found for implementing scroll-snap.Here they are using parent and child class.I am unable to understand how to achieve this using “classify” plugin.Any help would be highly appreciated.

...

.container {
scroll-snap-type: y mandatory;
}

.child {
scroll-snap-align: start;
}

Does the element with the .child class needs to be a direct child of the .parent? If not then you can give the .parent class to the repeating group (assuming that you want to achieve the scroll-snap thing in a repeating group) and the .child class to an actual element within the RG…

hi,

is it possible to make the text font-size of a text element depending on the view port width ?
What i did:

  1. assigned text element a class: → {addClass: “exampleClass”}
  2. placeed html element with code:

<“style”>
.exampleClass{
font-size: 20vw; ← doesnt work
color: #009EE3; ← doesnt work
box-shadow: 12px 12px 12px #000000; ← this works

<"/style">
}

Someone knows what i have to do ?
Thx and best regards,
Benjamin

Perhaps your CSS is overridden by an other font-size and color statement. In chrome you can right-click an element and choose inspect to see its properties. If it is indeed overridden, you’ll see your CSS striked out.

Although it should be used as a last resort, you can append the !important statement just before the semi-colon to tell the browser that this CSS property must have priority above all others.

thank you very much for the great reply.
You are right, it was really overwritten.
How can I see which statemen has overwritten it ?
With the !important statement it has worked, thanks.

As described in my previous post, you can see that when you inspect the element. The property that is applied isn’t striked out.

Hi all - have you noticed any disruption in how CSS is working in Bubble? Everything was working properly in my app until a few days ago.

I added the class “continuous-1” to my element as follows:


And I have the CSS code in an html element as below:

But the element is not animating at all (and it should according to the CSS code)

Any idea why?