How to enable CSS?

Hi guys,

I to copy this https://codepen.io/tomigm/pen/BaZwWgB into a Bubble page but the CSS is not showing or working?

Please see my Bubble page here sdfds5tg53yreg35r | Bubble Editor

The CSS appears to be working to me… what part of it isn’t working?

Try adding ‘!important’ at the end of each CSS statement. That should work.
It’s probably getting overridden by the default css.

Should look something like this:
#myElement {
property: value !important;
}

Thanks, but my CSS doesn’t end with #myElement, see my attempt below to do what you suggest.

Ah, must be the JS that is not working? The resizing functionality which is working in the Codepen is not working on my site.

@darren.james7518 You are not using !important correctly in the screenshot. Try replacing your code with this:

<style>
    .glass-1 { background-color: blue !important; }

    .input {
        margin: 5px !important;
        width: 100px !important;
        height: 30px !important;
        border-radius: 5px !important;
    }
</style>

With that being said, I’m not really sure why you’re even using CSS here. :thinking: Literally every single one of the styles in the code can be applied to elements through Bubble’s default UI.

2 Likes

Your JavaScript code is not inside script tags (i.e. <script> </script>)…

That said, why do you need to use custom JavaScript here…

As you’re using CSS, can’t you just add your own input element, and set the element’s max width to be the input’s value in the CSS?..

Should have been more clear with the example there.
@chaostorm explained it perfectly: How to enable CSS? - #6 by chaostorm

1 Like

Your JavaScript code is not inside script tags (i.e. <script> </script>)…

Thanks @adamhholmes that solved it, the (i.e. <script> </script> ) was the issue.

As you’re using CSS, can’t you just add your own input element, and set the element’s max width to be the input’s value in the CSS?..

Thank you, I will have a play around with this.

Here’s a (super simple) example of changing an element’s size dynamically in Bubble using just some custom CSS (no JavaScript required)

CSS Dynamic Size

@adamhholmes Thank you for this … what about if you want the user to be able to input height and width?

What I am trying to do is allow the user to input height and width, and inside that ‘box’ I want to show Bubble groups.

Exactly the same thing, just have two inputs obviously.

If that works then I would be thrilled … I just paid $1000 to a coder who has failed to do this … I’ve waiting 2 months and now need to do it myself …

I’ve updated the demo to have two inputs (they’re sliders, but obviously you could use whatever input type you like): 1 for width and 1 for height

Legend!

Holy crap, man. You should demand your money back immediately… and then send at least half of it to Adam. :wink:

I know! I had offered to pay anyone on this site but only one person came forward … even worse, this is the second person I paid and still no one can do it. However, never again, I won’t pay for anything again, I have to do it myself because I’ve learned that you can only rely on yourself!

It’s not resizing … what am I missing? https://bubble.io/page?name=index&id=sdfds5tg53yreg35r&tab=tabs-1

For one thing, you’d spelt ‘width’ wrong in your CSS…

Secondly, if you’re using ‘width’ and ‘height’ (as opposed to ‘max-width’ and ‘max-height’ as I did in my demo), you’ll need to add the !important rule in order to over-ride the default bubble width and height setting.

I’ve fixed both issues for you now in your version…

Also, with regard to the height, bear in mind that your current layout settings have given the parent group (Group A) a minimum height, and the shape has no max height… which means the shape will expand its height to fill the available minimum height of the parent container…

In other words, with your current layout settings, the height of your shape will never be less than 59px, even if the input value is less than that.

To fix that you can just set the minimum height of Group A to 0.

That’s so kind thank you @adamhholmes , I’m really excited to see if I can now get my window element to function as I planned :slight_smile:

1 Like