Overriding Bubble's default width, want to use REM's

shaheenery · 2024-07-16T15:38:36.151Z

Hello, I am converting a website to Bubble for a client. I am a Bubble newbie and trying to learn their way of doing things. I have some input fields with width set by REM’s.

Client wants input fields to be 14 characters long: .input-field { width: 14rem;} right?

Okay so obviously they don’t support it. But then there is the Classify plugin.

So in the ID attribute box I give a {addClass: "input-field"}

Great, now my input has the class.

Now the real problem: It seems Bubble ALWAYS gives a width in the style attribute of the input field. And based on how CSS works, this will alway take precedence over a width from a CSS class.

Screen Shot 2024-07-16 at 8.30.18 AM1354×737 258 KB

So is there anything I can do?

Something magic here with the width?

Screen Shot 2024-07-16 at 8.30.46 AM933×162 12.1 KB

AndyMountHood · 2024-07-17T02:26:17.561Z

I’m also new to Bubble, but what I see elsewhere in this forum is that you can sometimes override Bubble’s display settings by including !important in your CSS. Here’s an example: How to vertically center pop-up on mobile 🤪

shaheenery · 2024-07-17T13:58:51.696Z

Thanks @AndyMountHood , I have been so conditioned to never use !important as a bad practice that I didn’t even think of it in this case.

I also was googling around to examples of live Bubble sites and it seems like maybe the style attributes are only like that in preview mode? I couldn’t find an official answer by searching.

system · 2024-09-24T15:39:08.551Z

This topic was automatically closed after 70 days. New replies are no longer allowed.