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

while CSS can change the size of your RG, it doesnā€™t trigger Bubbleā€™s engine to refresh the number of rows. Thereā€™s no (easy) way to achieve this.

Iā€™ve never done it, but with some javascript I suppose it could be done.
Assuming the list arenā€™t too long (Iā€™d say 50-60 items), you could set the RG to full list. Elements of every row should be wrapped in a group with Collapse height when hidden checked and This element is visible on page load unchecked.
There would be a condition that compare the groupā€™s cellā€™s index to a Javascript to Bubble (with a numeric value) where If current cellā€™s index is less than the Javascript to Bubbleā€™s value the group is visible. Now you have control over the amount of row to display.

To make it sync with the size of the browserā€™s window Iā€™d use some javascript to set an event listener on window resize to calculate how much rows to display according to viewportā€™s height and pass that number to the Javascript to Bubble element previously mentioned.

If this work, like I said, the number of elements in your list should remain fairly low because they will all load even if they are hidden and repeating groups are power hungry.

Thanks coming back on this!

Iā€™ve experimented with putting each RG in an iFrame. I seems to work, but I worry about consequences of splitting my page into separate pagesā€¦

Best, Peter

Hey I just thought, of something better. Using my suggestion above, instead of using the javascript to bubble element to hide rows, you could use it to directly set the length of the list. It would look like this:

Also, Full list RGs expend the page height according to the number of cells. Since you want it dynamic, you should set the number of rows to only oneā€¦

This is so clever I had a hard time getting it :thinking:.

Iā€™m also experimenting with this using a floating group attached to both top and bottom and inside that having the RG, set to Ext. vert. scrolling.
(Cred to https://www.youtube.com/watch?v=AQqFMiUKKd0&feature=youtu.be)

Didnā€™t thought of that. Is it working?

Yes, for the shown example. I have other constraints that donā€™t play perfect with this. So, Iā€™m at a decision point of altering my design to be able to use this solution or not:

  1. I reuse a lot of stuff and would want the Floating group in a Repeating element. That does not work.
  2. I canā€™t make the Floating groups (I have two) or the RG inside it to act as I want on a responsive page. That is, I now got the scrolling fixed, but cannot get the horizontal responsiveness working (My page is 1200px wide and if the browser is wider I want to keep my content a centered 1200 px area).

Iā€™ve added this to a shape,ā€¦ I want to reform the hight of the shape.
Other elements are picked up,ā€¦ but the Height is not changing. Itā€™s so frustrating. Is there another way to dynamically set the hight? Or something I need to do differently?

Any tips are welcome (ps Iā€™m not the best in css)

OK never mind! and thanks @julienallard1 Iā€™ve gone over your posts time after time.
This works:

    <style>
.exampleClass { 
height: 200px ! important; 
width: 200px ! important;
}
</style>

Iā€™ve been working with variation of having the ā€œ;ā€ in the wrong place.
WRONG:

height: 200px; ! important

RIGHT

height: 200px ! important;

:+1: youā€™re right

1 Like

This plugin saved us so much time and work, man. Great work and thank you so much!

1 Like

Thanks for the feedback! it also saved me a lot time

Hi @akhilpuri2003 or @julienallard1

I am trying to find a way to change the height of the Repeating group cell.

I have successfully changed the height of the repeating group element as a whole as well as the elements inside of the repeating group cell.

My problem is that the repeating group cell itself does not change its height. So whatever height I set original in my design on the repeating group, the cell remains that height.

My repeating group is set up to be full list with a single row

Screen Shot 2020-11-16 at 10.36.57 PM

This repeating group gets populated with roughly 35 entries, so after the repeating group data is loaded, the repeating group would naturally expand from its original height of 200px to 1000px.

Using an HTML element with some styling, I am able to change the repeating group height to be less than what it would naturally increase to (so instead of 1000px, I set it to 500px)ā€¦the problem is that cells are getting cut off as the cell itself is not changing the height accordingly.

Screen Shot 2020-11-16 at 10.41.21 PM

Any idea how to get the repeating group cell to change its height?

I tried to follow @akhilpuri2003 post on this thread but what ended up happening for me was the group inside of the repeating group no longer changed size.

Cells in repeating groups have the class group-item, so you can easily refer to them from the class you gave to the RG.
So this should work:

.rg-calendar row > div.group-item {
...
}

The row > part is to prevent CSS to also select cells of a nested RG if there isā€¦

Thanks for that. I am going to have to try this out tomorrow.

I was pretty excited to try and build this calendar and I went through and made a calendar without using a repeating group. Was able to get it to be fully responsive to page height and width.

I am having a huge problem with getting it to follow two different rules.

I have the html for style settings set up with conditionals based on a custom state value of yes/no.

This is to try and get the calendar to be full screen when a side menu is not visible and to contract in width when the side menu is visible. Because Iā€™m building this calendar in a Reusable Element and my side menu is on the page, I used the customs state.

As far as I can tell the custom states are getting set correctly but the HTML doesnā€™t seem to get changed, although it doesā€¦I made this video to demonstrate. Basically on page load the side menu is visibleā€¦when I close the side menu the calendar doesnā€™t adjust its size, until I start to change the browser window width.

Then after resizing the browser window width and I show the side menu again, the calendar doesnā€™t adjust its width.

In debugger I see the custom state being set

And my HTML is set up like this

Screen Shot 2020-11-17 at 3.14.27 AM

I really have no idea what the issue isā€¦I even tried to apply style settings on the reusable element on the page itself, but that had the same results.

Any idea what might be the issue here?

1 Like

I have this plugin installed but I have no idea where to find it. There is no plugin to select nor can I find it in existing elements. Where do I add the html and css? Its late here and I am tired so I am likely missing something obvious but please somebody push me in the right direction

@phrase9
There are no element or workflow actions. Read the first post of this thread

Instead of changing the HTML according to conditions, you should use classes to assign the correct CSS; let say .fullscreen and .sidemenu.

Merge the 2 <style> tags into one static HTML element and append the two class names above to the existing classes to they are applied upon the good condition.
Ex.:

.fullscreen .row {
/* CSS to apply to .row elements when calendar has class .fullscreen */
}

.sidemenu .row {
/* CSS to apply to .row elements when calendar has class .sidemenu */
}

All you need to do then, is to use Classifyā€™s addClass/removeClass in conditions adapt the design.

1 Like

Thanks for the advice. I tried to follow it but there is no luck in getting this to work properly. Still have the same issue.

Looked at the inspector and see some strange things happening with Bubble-r-box

It is showing two different width values for the same element in the inspector.

Up top the dialogue shows 1920px, but below it shows 1640pxā€¦this is something that I donā€™t know how to get overā€¦I was able to get the top dialogue value of 1920px by using the r-box in my code as previously both values were 1640px and it seems this .div is what is keeping everything else from expandingā€¦of course when I drag the browser window the value changes to 1920px in both locations.

Hello Guys, several questions here:

  1. When I add 2 classes on element and I remove one in condition, will it remove all classes or just that specified one?
  2. Is there a way to specify permanent class?
  3. While using conditions, and the result is FALSE, will classify revert the classes to previous state?

The reason Iā€™m asking is, because Iā€™m experiencing some kind of weird behaviour (or i just do not get the functionality). Letā€™s pretend I have DIV X with inner one line divs A and B and each of them has one line divs 1 and 2. What I need to do is change classes depending on page width. And because the DIVs A and B can get on two lines as all divs 1 and 2. But when I started to specify page width conditions I felt like classify do not just put it on elements in right time, or remove classes that were not touched by conditions.
Visual examples:
default:
[A[1, 2], B[1,2]]

page width under 800:
A[1, 2]
B[1,2]

page width under 400:
A
1
2
B
1
2

Thank you for any answers. Pretty sad, that bubble dont want to let you work easely with css or, at least let you specify % height. The deeper mind of solution is: am trying to get modify r-lines and r-boxes to be able have 100% height of cards, but just only when they are on the same line, otherwise itā€™s not desired.

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.