Its a bar chart, no.. its a responsive thingo, no wait a responsive bar chart thingo - make a toast popup with moveit, & material theme - how to make a bubble slide menu!

@vincent56 here is the demo of altering the width of a repeating group and its group inside…

Live: HERE
Edit: HERE


Thanks for this. Coupe of questions:

  1. I don’t see the result/input in the RG. I think this is supposed to be a visible condition:

But the condition is no by default:


  1. In my app I cannot reference the CSS tools when it is inside the RG:

What am I missing?

Hi @jarrad this is great, thank you. Looks like its being edited at the moment hoping it stays understandable :-).

Is it possible to affect all the elements within the RG rather than just one “cell” at a time?



@vincent56 you need a man on the inside, grab yourself a button and style it so its invisible then trigger the button, by trigger I’m assuming you don’t want to have to click the button so ive added to the demo to so you how to click it without actually clicking it.

@rossliddell thanks mate, I will leave the demo alone, just adding some bits for @vincent56.

Dude, you have me so lost here!

In the demo, the trigger button is not showing up because as far as I can tell, you need to click the button to set the index expanded to ‘yes’ for the trigger button to be visible.

Since it is read-only, there is nothing I can do.

Replicating this in my own app is not working because I cannot reference the CSS tools plugin element when it sits inside the RG as per my first comment. What am I doing wrong?

EDIT: OK now, the data is showing up after an app update!

EDIT2: That is awesome, now I just need to be able to reference the plugin element in my own app’s RG and try and see if the changes also work vertically.

no, the problem there was I forgot to push the dev database to live so there wasn’t data to create the cell… back on earth now? lol

reference the plug bubble plugin for how to “click” that transparent button…

I tried to put the plugin element inside the RG in my sandbox app which is completely empty and I have the same problem.

The Change element size over time action is not able to reference the css tools element inside the RG.

EDIT: sorry, I posted before your post. I’ll check right away.



Nope, still completely lost here! You are referencing the custom code block? I thought that was related to the slide menu reacting on mouse hover.


The only way I can manipulate a RG is by adding the CSS tools element outside of the RG and referencing the ID of the RG. But obviously, this does not let me manipulate individual cells as per your example. I need to be able to put the element inside the RG’s cell something that is not recognized by the action :frowning:


How does my slide menu reference the css tools inside the repeating group I made it out of??

The same way you need to, I have hidden a button in the RG. ive told that button to change size over time… the button is inside the RG so it can reference it! then on page load what does the custom block do?? it triggers what you cant by clicking that button for you… and what happens when that button is clicked?? :slight_smile: when I say a hidden button, I mean transparent, opx wide or 0px high not do not load on page load… be a bit hard to click what hasn’t loaded…

do you want to just give me link and I will sort it out? seems like you have been stuck for days and its something that I can just do and you will still have the how for next time.

No I actually got it :slight_smile:
It was just not clear there had to be something like a button in the rg for the css action to be able to reference the plugin element in the RG.

I’ll get to work on the vertical cell shrink when I have time. Thanks!

1 Like

Where do I get the material theme plugin? Did you add the buttons too?
Added the markup to the header html, but having a plugin is always nice :slight_smile:

the material plugin will be released soon, just working the best method - currently the plugin is a transformation to the entire site with no option to turn certain things on and off… a material skin so to speak. The plan is to make bubble elements skin enabled by choice and the extra components addable as a single element with a “what should this element become” type setup.

Great Question! looks really slick @jarrad :slight_smile:

how cool is the calendar? that’s the default bubble datepicker with the plugin installed…

:raising_hand_man: Hi! Back again, with yet another question:

How do I remove the class of a dad element? I tried the simplest: add class to dad element inside a single group, then changing css. Works fine. The another button reset the group to original values and removes the class. Inspector tells me class has not been removed.

Where I really need this: in my RG. I have it setup that the dad element takes on class ‘x’ based on a condition set on the current cell so I only manipulate the cells I need.

This works great. Until I close the group with the RG and load another dataset. The RG gets scrambled because the inspector tells me there are now 2 classes on one cell so it doesn’t know what to do.

So, in short: how do I remove the class for when a new dataset in the RG is loaded?

Thanks :smiley:

The dad element is not what takes on the class. this why its so powerful, its designed to drop on the page and choose to add the class or remove the class from its actual parent. try making the conditional argument change to remove on the element so it removes that class then change the class name, then change back to add. let me know how you go. I might add the ability to select the parent level and arm/disarm the element for delayed triggering… its just finding a balance between number of tools vs number of free support hours i can provide.

try making the conditional argument change to remove on the element so it removes that class then change the class name, then change back to add.

Thanks for the tip! Back at it.

The calendar is really cool @jarrad. How do I do this?

You could add it to your site manually but better to wait until @jarrad finishes the plugin