Forum Academy Marketplace Showcase Pricing Features

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

One thing for sure, messing with width and height of elements is a challenge because you are in competition with Bubble’s engine and HTML structure design. Re-sizing an element does not resize the parent bubble-r-box and grand-parent bubble-r-line. Parents and grand-parents may have several children (Bubble elements) so if you do address them with CSS you have to consider that other elements might be affected also.

Do you know javascript?

As for the dimensions, 1640px is the default width, the one you entered in Bubble editor, but you probably also enabled the element to resize with page, so the 1920px value is the actual size of the element managed by Bubble’s engine.

  1. only the specified one will be removed

  2. what do you mean by permanent class? A class that will be added whatever condition is true? If so you have to make sure that upon page load there is a specific condition (or default) that always be true.

  3. Added classe upon a condition isn’t automatically removed when the condition becomes false. You have to explicitly remove it with the new condition. Same goes with removing a class.

tip: since you can use dynamic data expression in the ID field, you can alter classes with expressions. For example, you could write:
Current user's gender value is "male":formatted as text :
text for yes: {addClass: "blue-background"}
text for no: {removeClass: "pink-background"}

1 Like

Great, explains a lot. The second question were actually posed if the answer on the frst one will be negative. Third explains what I was dealing with. So it is really normal, my element has its default value remove all classes and then depending on condition I add those I need in that moment.

Thanks for the tip, cool one :+1:

forgot to mention, if a condition adds a class and then a new condition adds the same class again, it will be skipped.
Classes aren’t added twice and removing a class that doesn’t exist does not throw an error :call_me_hand:

1 Like

Thank you for this! it’s awesome, coming form coding and started using bubble this week and the main problem i found with the platform is the styling.
Can i ask how did u made the plugin? is it done on the “create plugin editor” inside bubble or via bubble API? I would like to create some custom modules/plugins and i don’t know entirely yet how does the platform work in this aspect.
As you say before, messing with the width and height of the elements brings headaches :sweat_smile:, i found as a solution using position “fixed” for some elements to respect sizes and using min-width/min-height intead of w/h for resizing boxes.
Thank you again, the bubble’s dev team should review this to actually implementing it! (and give you a production account as a gift maybe hehe). Will keep exploring the plugin!

Greetings :slight_smile:

1 Like

Hi @boston85719,
@julienallard1 seems to have already provided much guidance on the issue and he is far more well versed with Bubble, CSS and Javascript than I am.
I will just summarize the approach used by me to achieve responsiveness on mobile- please see if you have followed the same:

  1. Define the CSS properties and classes inside an HTML style tag.
  2. Use a conditional statement on the element you want to resize (inside the design tab on the editor) to detect when the element should become smaller i.e. only on mobile screens and not on desktop. I use ‘Current page width < 420’. The property to change when this condition is met is the ID attribute. Use the classify plugin to add the class you had defined inside your HTML tag in the ID attribute. Refer to the screenshot below.
    image
  3. In the workflow tab use the Toolbox plugin to run jquery when the page is loaded. This Jquery will select the parent of the element you want to resize and also the parent of the parent and add the same CSS class to these two elements to ensure they also get resized. Even if you do not know Jquery- you can just copy the syntax used here and change class names to match those you have and it will work.

Hope this helps clarify things a little more and you can get it to work.

Cheers
Akhil

Hi,

Does anyone knows the lines of code to align vertically a multiline text?

Because the built in feature does not works with a multiline text.

Thanks in advance :slightly_smiling_face::computer:

1 Like

Hello,
Thanks for sharing better idea

Here’s a link to a CSS reference I use all the time when coding. You might find what you need.

thanks for the positive feedback!
I actually built the plugin with the plugin editor. No API

1 Like

Thanks @julienallard1.

I was reading this post and @casheets123 used this code:

<style>

.textClass {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

</style>

But didn´t worked for me.

I think I am using your plugin wrong.
Ca you explain to me, please.

Thanks in advance