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.
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ā¦
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:
I reuse a lot of stuff and would want the Floating group in a Repeating element. That does not work.
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)
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
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.
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.
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.
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.
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
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.
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.
When I add 2 classes on element and I remove one in condition, will it remove all classes or just that specified one?
Is there a way to specify permanent class?
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.