Forum Academy Marketplace Showcase Pricing Features

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

Hello,

Im struggling with making a group 100% height of his parent element.

Here is my actual setup.

image

  • parent.IDAttribute : {addClass: “parentGroup”}
  • child.IDAttribute : {addClass: “dynamicHeight”}

HTML element :

.parentGroup .dynamicHeight { height:100% !important; background-color: red !important; }

Result :

image

We can see that the child turn red which means CSS is applied but the child height is still its original height.

When inspecting the element I can see that Classify is adding a child div to the child element, so Im guessing my child element dynamicHeight is 100% of bubble-r-box and not 100% of parentGroup

Classify doesn’t add/remove HTML. What you see is Bubble’s engine’s structure. All elements are wrapped up in .bubble-r-box divs and those that have a similar vertical position are wrapped up in .bubble-r-line divs.

So you’re right when you say that the child has 100% height of the .bubble-r-box. I’ve been messing with elements’ height a few time and I must say it’s a challenge to overcome Bubble’s engine.

If the height of the parent is known and static, you could set the child’s height to the same value in px. So it would overflow its parent box and line (I think the overflow is visible by default…)

Thanks for the reply.

The height of the parent will depend on the amount of text (which is variable) there is on the left container. So I guess in my use case it will not work :confused:

Any other way to make a child div 100% height of the parent div ?

There are 2 ways I think that could work to set both bubble-r-line and bubble-r-box 100% height:

1. Refer to the bubble-r-line and bubble-r-box according to their position as child. Looking at your screenshot above your CSS would look like:

.dynamicHeight,
.parentGroup > .bubble-r-line:nth-child(1),
.parentGroup > .bubble-r-line:nth-child(1) > .bubble-r-box:nth-child(3) {
    height: 100% !important;
}

Indeed for this to work, the line and the box position as children must remain the same…

2. Using javascript, you can refer to the bubble-r-line and bubble-r-box starting from the child. It might be less performant but probably more reliable than the 1 solution.
Classify also supports javascript commands from the ID field. It also provides some useful references of surrounding elements. So instead of adding a class like {addClass: “dynamicHeight”}, you could write [fullHeight(p)] where fullHeight() would be a custom function you write and p is the data provided by Classify (see below)

In an HTML element somewhere in the page, you’d write the following:

<script>
  function fullHeight(p) {
    [p.self, p.box, p.line].forEach(e => e.style.height = "100%");
 }
</script>

…where p.self refers to the child element, p.box to the parent .bubble-r-box and p.line to the parent bubble-r-line div.

By making all elements 100% of their parent, I suppose that you’ll get what you want…

1 Like

Hey salut @julienallard1

Do you think I can add this kind of effect with your plugin?

I tried to add one without success. I copy/paste the css code in html header :


and the command in the elementid but nothing happens:
image

I’m missing something :confused: maybe you can help!

hey allo @Sarah_Esteve. Montpellier France ou Montpellier Québec? :slightly_smiling_face:

The CSS you copied paste is written in SASS; it’s a faster way to write CSS but in the end, that needs to be compiled in pure CSS. The browser doesn’t understand SASS so that must be the reason.

I converted by hand the shutter-out-vertical part so you can try again.

If it still don’t work, try putting the CSS into an HTML element on the page rather than in the page’s header element.

.shutter-out-vertical {
    -webkit-transition: color 300ms;
    transition: color 300ms;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
.shutter-out-vertical:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #2098d1;
      -webkit-transform: scaleY(0);
      transform: scaleY(0);
      -webkit-transform-origin: 50%;
      transform-origin: 50%;
      -webkit-transition-property: transform;
      transition-property: transform;
      -webkit-transition: 300ms ease-out;
      transition: 300ms ease-out;
}
.shutter-out-vertical:hover:before {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
}

@Sarah_Esteve for the sake of sharing knowledge, perhaps you could share if you made it work?

Hey @julienallard1 sorry I tought I d respond
Try this morning, maybe I did somethin wrong because it’s not working :


image

Sarah
PS : I’m from France :slight_smile:

Classify is case sensitive; addClass needs an uppercase C. :wink:

oh god… it is working so nice !

hope you’ll join the platform when it will be ready :slight_smile:

Génial! On aime ça des petits problèmes faciles à régler comme ça!

:+1:

2 Likes

Yes carrément ! Merci encore à toi

Another question. I’ve an uggly scrollbar there that I want to make disappear :woman_mage:

image

I already have an html element on my page, and I added the code to make the scrollbar disappear as I saw in another post, but seems my magic is in vacation :confused:

image

image
(didn’t forgot the case sensitive thing :upside_down_face: this time

What did I do wrong @julienallard1

Maybe your adding the scrollClass to the wrong element?

In your CSS, try to target the children of the .scrollClass element instead. Like: .scrollClass * and .scrollClass *::-webkit-scrollbar. This will disable the scrollbar for any children element that could have one…

Ultimately, if you write html *::-webkit-scrollbar { display: none; }, that would disable all scrollbars on the page.

Disable or not display? Because I want it usable but not visible

I meant “hidden” not disabled. My bad

1 Like

it worked!! thx !

2 Likes

Nice!

1 Like

hey @pierre6, @opaper and other developpers,
I just released a new free plugin to help fixing responsive height issues. Have a look!

2 Likes

Hi,
I tried to use “position:sticky” to create a sticky header once the user scrolls past the element - it did not work however.

Was anyone able to use (position: sticky) on an element? Or has anyone an idea why it is not working? :slight_smile:

Thanks in advance for the help.
Maze

There could be numerous reasons why it’s not working. As this article explains, one of the reasons could be that your sticky element does not have sibling elements to “stick over”. In Bubble, all elements we put on page are wrapped inside a “box” group and those groups inside a “line” group; It’s how the engine achieve its responsive behaviour.
Depending on the complexity of your page, if your header is nested into a group that is nested into another group, that adds a lot of levels, so your sticky element is alone in its place.

I think you’d be better off with javascript; something like if the distance between my header and the top of the page is less than scroll distance, make the header's position fixed on top.

1 Like