Dynamically Adjusting Padding Based on Image and Database Values

Need help
1

Hi,

I’m facing a challenge where I need to dynamically control the padding around text displayed over images. Here’s the setup:

  • Image Table: I have a database table storing images. Each image record includes:
    • Image file
    • Description
    • Top, bottom, left, and right padding values (to determine text placement)
  • Goal: Display an image from this table with overlaid text. The text position (padding) should adapt based on the specific image selected.

The Problem:

  • Bubble’s conditionals only allow fixed numeric values for padding, so I can’t reference the database values directly.
  • I have about 50 images, each with unique padding requirements due to varying graphics.

What I’ve Tried:

  • I considered setting individual conditionals for each image, but that’s not scalable.

Ideal Solution:
I’m looking for a way to dynamically adjust the padding of the text group when a new image is selected. The padding values would be pulled directly from the database record associated with the chosen image.

Any suggestions or creative workarounds would be greatly appreciated!

2

You can do this using css
Css should look something like this

#GroupID
{
padding-top : FromDB px !important;
padding-bottom : FromDB px !important;
padding-left : FromDB px !important;
padding-right: FromDB px !important;
}

3

Thanks @maheshkasindi for the response. I’m assuming in your example, #GroupID would be the element ID of the image?

And then, FromDB would be dynamic and represent whatever the image was for that row?

I guess what I’m struggling with is understanding how to make the padding dynamic for each different image. Image 1’s padding will be different than image 2, and so on and so forth.

4

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