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!
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:
Result:
@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
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
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âŠ
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? 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 This is a screenshot of the inspect and from what I can see is that the âtestâ class is applied to the 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.