Ability to add custom CSS class to Group element

Idea
1

I’d like to be able to add classes to group elements:

<div class="bubble-element FloatingGroup floating-group"...>

which would then appear as <div class="bubble-element FloatingGroup floating-group custom-class"...>

Right now I have to place everything that takes a custom CSS class inside HTML blocks, but it would be beneficial to reference a parent class of a group to have more control over custom styling.

2 Likes
2

While you wait for the idea to be implemented in an amazing way … a hacky workaround could be to add it to the floating-groups using JQuery in a HTML element.

You may find that the HTML element needs positioning lower than the floating groups, or make its script wait for page load, to find the Bubble elements.

1 Like
3

+1 I need as well to add custom CSS for a client and can’t. Printed PDF can’t look good.

4

I have attempted the hacky workaround you mention, but am having difficult referencing the correct DOM elements. I haven’t actually tried a 100% JS/jQuery solution but rather a mix of JS and CSS (using nth-child selectors). Will post back here if I find a decent workaround. One idea I just had is to place a tiny HTML block at the top of a Group, insert a blank div with an ID and then reference the parent Group with JS based on this HTML block’s ID and climbing the DOM upwards until it finds “bubble-element FloatingGroup”…etc. Is this kind of what you meant @mishav?

5

Good workaround, @philip

1 Like
6

Hi y’all.
How do you create an empty div?

7

<div id="thisIsAnID"></div>

8

You will need to place this inside a HTML Block Element.

9

Ah. I thought you had a workaround for needing the HTML element. Find any other CSS tricks?

10

I had tried using nth-child selectors but the layers/Groups in Bubble were not staying in the same order (they were randomly changing around based on new groups I was building). I got further by using the .addClass jQuery function:

https://api.jquery.com/addclass/

There is also: https://api.jquery.com/closest/

I haven’t gotten around to working on this more but I will be sure to post back when I do find a working solution.

11

I have a similar post for a problem that I’m working on, with a good example of JS that I used at the page header here: How to make Repeating Group height dynamic to fit screen resolution? - might be useful for someone… :wink:

2 Likes
12

Thanks so much for posting your JavaScript! Very helpful.

2 Likes