hey @danschlung , I see that your example contains curved quotes. In your code make sure to use straight double quotes.
If youâre unsure, try using single quotes, I think Classify supports them too.
Thanks for the quick response @julienallard1. Itâs still not working on this element. I resolved by wrapping in another element and adding r-page {addClass: âpage-paddingâ}{style: âpadding: 60px;â}. No idea why margin isnât working, but this workaround has solved my problem.
Also, this is just FYI, but I believe the âcurved quotesâ is just a factor of the default forum font (I donât have an option to differentiate between straight and curved quotes). Here it is again, in a code block:
{addClass: "margins"}{style: "margin: 60px;"}
and within bubble:
1 Like
Hi there.
Can someone help me understand the use of tempClass and removeClass? There is not much documentation on these and Iâve hit an issue that may be because I should be using one of these.
In my specific case, Iâve successfully used a conditional statement to add a class to some repeating group content. The conditional restricts the application of the Classify class to only the last item in the repeating group.
When the page loads, the Classify class (and associated styling) is applied correctly. However, if you change the data in the repeating group (such as by adding content or changing the data source), the âlast itemâ style is applied to every item (more detail in this thread).
The debugger shows the conditional statement evaluates correctly in each case, but the classify class seems to somehow break free if the RGâs data changes.
If it matters, my CSS style is using :before and :after pseudo-elements.
So I have answered my own question and wanted to share in case someone else is looking for this, as I did not find this intuitive.
Natively, I believe that Bubble continuously evaluates conditional logic as actions are taken on a page, and updates all of the native âpropertiesâ of a condition automatically. So, for example, if you have a condition that applies a background color only to the last cell in a repeating group, and data is added to the RG such that the original cell with the added color is no longer last, Bubble automatically âundoesâ the conditional (i.e., removes the background color from the original cell) and then reapplies it correctly (adds color to the newly last cell).
If you use Classify to âaddClass:â in a conditional statement, this automatic removal by Bubble does not happen. So you must add a second conditional, with logic opposite of the first, with a âremoveClass:â action to replicate what Bubble does automatically.
In my case, I wanted specific styling applied only to the last element in a repeating group. âaddClass:â would work, but as soon as a new data point was added to the RG, the styling that should only be on the last item was now on both the last item and the second-to-last item.
Further, if you changed the RG data source (such as flipping between two task lists) and the new data source had a different number of items, the styling could end up all over the place. This was because the different lists had different âlastâ cell positions:
- The first list, for example, may have 4 itemsâŠso cell 4 was last
- The second list might have 6 itemsâŠso cell 6 was last
But when you loaded the second list, cells 6 and 4 would have the styling applied, since they were both âlastâ at some point and Bubble doesnât automatically remove the Classify styling as it does other properties.
So this is where the âremoveClass:â action is truly needed!
(As an aside, I did try âtempClass:â and it seemed to sort of work for this, but not always. I didnât spend much time looking into this though).
Anyway, just posting in case someone else searches for when to use removeClass or has a similar issue. Hope it helps.
Thanks for continuing to work on this plugin and making it available to all.
1 Like
Glad you could resolve your issue. And thanks for taking the time to explain the solution.
You got it right: conditionally adding a class does not automatically means itâll be removed when the condition is no longer true. So you have to explicitly remove it in other conditions.
The intention behind tempClass is to have the class removed automatically when the condition no longer applies.
Now, you said that it didnât worked all the time; that might be another issue thoughâŠ
I am having a similar problem with tempClass not removing. It is likely my error, but the setup is basic:
on-hover: my-logo {tempClass: âexpandâ}
on-not-hover: my-logo {tempClass: âcollapseâ}
What I get:
on-hover: #my-logo class=âexpandâ
on-not-hover: #my-logo #my-logo class=âexpand collapseâ
Iâ having trouble with the placeholder pseduo element⊠I have this code in as arbitrary text:
{style: âtext-transform: uppercase;â}
But cannot work out how to have --placeholder text-transform: none
As when i go to my input on the form, both placeholder and the text typed is uppercase, ideally, i want the placeholder to be normal case⊠any ideas how i can add this in as well?
tempClass is working fine on my side. Iâd have to take a look at your page to understand why the temp class isnât removedâŠ
@stuart9 youâre almost there. You have to replace the 2 dashes by 2 colons:
input::placeholder { text-transform: none; }
In my case, I had to explicitly set a âcounter conditionalâ with a removeClass. I couldnât get tempClass to work 100% of the time. So Iâd recommend explicitly creating 2 conditionals:
1st for when the element is hovered â addClass
2nd for when element is not hovered â removeClass
Hey @julienallard1! As always your plugin is a godsend to Bubble.
Iâve always been having problems with getting classes to overwrite how Bubble renders width and height style properties. Usually Iâll just add !important to a class property and that takes care of the issues.
Iâm trying to do the same but with Classifyâs inline styles {style: xxx;} but keep failing. Every property works well enough except when it comes to widths and heights. I tried to add the !important tag but no bueno. I tried using a javascript expression to this.self but that doesnât work either.
Any help will be appreciated 
Did you take a look at the elementâs styling in the dev tools of your browser? If you apply width rules using Classifyâs {style: xxx;} but it taking no effect, you should see it in the dev tools being crossed out in favor of another rule taking over. That should help you find a solution.
No matter what I try, Bubble seems to remove display: grid or even display: grid !important. Any idea if possible to make this work?
Nonetheless, I got a grid-like setup using Classify 
Hello, Iâm trying to learn how to use the plugin, but I tried a simple example to run alert, but without success as shown in the images.
Weird⊠Is it the only element on your page to make use of Classify?
Try creating a new page with only one element with this [alert("hello");] codeâŠ
To all of you, who use custom javascript in the ID field, I just published Classify 4.0.3 that brings handy improvements on error management:
- BUG FIX: Upon page load, if multiple elements had custom javascript and one of them threw an error, the subsequent elementâs code wouldnât be executed as well.
- IMPROVEMENT: Now if one or more elements with custom javascript throws an error, every error messages will be neatly written along with the concerned elementâs name in the debugger.
Happy debugging!
1 Like
Hey @julienallard1 - Iâm seeing this as well.
Have got a test page with just [alert("hello");] and getting the same error.
And yet in a different app itâs functioning absolutely fine.
Iâve tried having the JS live inside of an element thatâs hidden on page load then shown, inside reusable elements visible on page load and not visible on page load. Same error each time. Canât find any rhyme or reason to it.
@MattN Did you updated Classify to 4.0.3?
Yes I did.
Would you be willing to PM me a link to your app so I can take a look?
1 Like