đŸ”„ Classify 4: A tiny plugin that brings CSS classes and +

Thank you @julienallard1 for the prompt response. I will dig deeper by following your suggestions. Really appreciate your help here! And great plugin btw

Hey @42.decaen ,
I just experienced this. When I inspected the element in chrome I noticed that the class was not being added. However, I could see the {addClass: “myclass”} in the element’s id attribute. So, I removed the command from the ID Attribute field in the bubble editor and then typed it again and that fixed it. Not sure what caused it, maybe copying elements.

hmm unfortunately i’m seeing this too @julienallard1 . I did copy elements over from another app, the other app continues to work, but the new one doesn’t seem to want to add classes to the elements. inspecting in console just shows the id attribute of {addClass: “myclass”}

very odd! if anyone else having this issue, help would be appreciated!

figured it out. a separate unrelated plugin called styled checkbox has a deadly simple bug which will wreak havoc on other css js. basically the author tried to delete some unused code and accidentally also deleted a closing “”! leaving the code open-ended and confusing any parser. bubble was putting classify’s css source ref right after and it was thinking it was some style code!

be careful if you use this, keep it on v1.0.0!

1 Like

Glad you got it figured out. My issue was somehow the quotes went from “straight quotes” to “smart quotes” Not yet sure how that happens.

Comand:

image

Result:

image

@moabe.leite
This old class command expects an array of string but you provided a single string. Thus Javascript converts it into an array of single letters.

I advise you to use the addClass command instead of class (see instructions in the first post).

Does Classify work with the new responsive engine? I couldn’t make it work in my app and created this simple test app

it works if the page index is fixed, once I changed it to row, the html style change no longer taking effect.
Any idea how to use html style in responsive engine so we can control some elements?
Thanks
Amy

I haven’t worked with the new responsive engine yet but I’ve been told a few times that Classify works flawlessly on both versions of the responsive engine.

One thing that’s for sure is that the structure of pages’ HTML has changed a lot so if you’re trying to make older CSS work with the new engine, perhaps that Bubble’s CSS is taking over yours. The best way to know is by using the developer tools from your browser to check on the defective element.

Does this work on elements in Repeating Groups? I successfully added it to static elements, but I can’t figure out why it’s not showing on items inside a repeating group.

Yes it works with elements in repeating groups :+1:

any ideas as to why it might not be showing on items in a repeating group? Where should I start looking? I’m pretty good at troubleshooting, and went through everything I could think of. Double-checked the classes + ids added via inspector and they’re all where they should be. But those darn tooltips just aren’t showing.

If the classes and IDs appear correctly in the inspector, then Classify did its job. Now there can be numerous reasons of why you tooltips aren’t showing.

In the inspector, you can see all the CSS properties that are applied to your element. Could one of them prevent the displaying of tooltips?

Usually, tooltips are displayed on a mouseover event. Is the event fired? Is it fired on the proper element?

Since you’re using Classify, I assume that you have a custom solution for the tooltip. If so, is there anywhere you could add a simple javascript console.log('hey') to run whenever the tooltip is expected to show? That would help isolating where the issue is.

lol - got mixed up where I was commenting. My previous reply was meant for a different topic. Worked out the Classify issue previously. #ImAnIdiot :man_facepalming:

I have a super simple page to test the plugin. Just an image and a HTML element. No groups
nothing. I’ve set the ID of the image as follows and the HTML as follows. But it does not work



image

I would like to change the image opacity to eg 10% (but even more I would like to change the opacity color to something else)

What am I doing wrong? :man_facepalming:t2: Thanks!

On the preview page, could you right-click on the image and choose “Inspect” (on Chrome) and see if the class is applied to the image?

My apologies, but I have no idea where to look :joy: This is a screenshot of the inspect and from what I can see is that the “test” class is applied to the image?

image

You’re almost right. The test class is applied, so the plugin did its job, but as we can see the actual image (<img> tag) is wrapped inside a container (<div>) and that’s make the Bubble image element.

Even though your HTML is not dealing with the image directly the opacity should work. Perhaps there’s already an opacity rule in Bubble’s CSS. Try to change your code to opacity: 0.1 !important; and see what you get.

Great stuff! Thx. Worked 100%. I was wondering whether Bubble overrides the html code, because I saw there is an opacity setting that can be set. It must be a new(ish) feature as I can’t remember that the opacity could be set manually.

Thanks again!

Why then not using Bubble’s opacity field?

If you need to use custom CSS, I suggest that instead of fighting Bubble’s styling with the !important statement, you could change the <img>'s opacity directly instead of its <div> container. In this case, I believe, you wouldn’t need the !important statement. In your HTML, change the CSS selector from .test to .test > img.
It’s generally a better practice to rely on !important as less as possible.