🔥 Classify 4: A tiny plugin that brings CSS classes and +

[julienallard1]

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

Spacer: a plugin to better control responsiveness of your app

Since the release of the successful Classify plugin, most of the help requests I received from developers are about Bubble’s responsive engine’s shortcomings regarding the height of elements. I, myself, faced many challenges that ended up with overcomplicated workarounds to simply have a group to adjust its height dynamically. While the new Flexbox engine gets released to everyone and gets implemented in every app, this new Spacer plugin aims to improve the responsiveness of pag…

[maze]

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?

Thanks in advance for the help.
Maze

[julienallard1]

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.

[Arzy]

Hey Julien,

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

Default "element style" interfering with JS and custom CSS

Hi everyone! I run into this issue where the display:none; should be “! important” to have my footer hidden after the js clearTimeout. [Screen Shot 2021-12-01 at 10.11.27 pm] Code is simple. It’s just that if I set the footer to not visible it’s not showing up at all and when it’s visible after the clearTimeout it reappears… Any solution to set this up? I use this JS Thanks!

Enjoying Classify btw!

Merci

[julienallard1]

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

[maxencepautre]

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

Thank you

[bubblealex]

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

Thanks!

[julienallard1]

@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';
});

[vaibhav.malhotra1221]

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

[julienallard1]

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

[julienallard1]

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');

2. 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.

[vaibhav.malhotra1221]

@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;
}

[julienallard1]

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…

[benjamin.doerries]

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

[julienallard1]

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.

[benjamin.doerries]

@julienallard1

!important

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.

[julienallard1]

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

[42.decaen]

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?

[42.decaen]

bump. Anyone is experiencing the same issues with the Classify plugin not working anymore?

[julienallard1]

For Classify to stop working, there would need to have some code that intentionally stops it.
You should use the browser’s debugger to find where it breaks. If you inspect the element that has Classify commands and the element’s ID still contains the commands, then yes, for some reason Classify hasn’t parsed it.
Otherwise, still while inspecting the targeted element, you can check if your CSS rules are applied or not.

There can be many reasons why it’s not working. Have you reviewed your CSS for errors like missing semi-colons or brackets?