Multiline input padding on mobile but not web

Has anyone else noticed that, when using a multiline input with a fairly large font (28px in my case), that there’s a white-space / left-padding that gets inserted on mobile but not web? I have confirmed this across multiple browsers (Chrome, Safari, and DuckDuckGo) on both surfaces. It makes it extremely difficult to align the left edge of various components on my page. Is there any way to resolve this? It’s around 15-20px or so and is really throwing things off.

Conditional rule?

I have no conditionals on this. I put a brand new multiline input on the page and noticed the same result.

Interesting!

Can you add some css to reduce the padding by chance?

Just tested with 28px font, I only have the standard 6px padding, no increase on mobile or small browser, can you send a screenshot / url?

Here’s the web version:

And here’s the mobile:

Like I said, it’s minor (~10px or so) but my OCD is killing me.

this looks like text rather than an multiline input element?

Is it only when it breaks to a second line?

It’s a multiline input, just formatted blue at 28px (it’s the title of a document, which the user can edit). It happens when on a single line as well, and with placeholder text rather than user-input text too.

I would suggest it will be a group with some margin or padding on it, but in your developer tools or debugger you should be able to identify which object is causing it

Have you by any chance verified that adding a generic multiline input to the page and upping the font size to 28px looks proper on web and mobile?

The kicker is that I can add the multiline input to any page, anywhere and the same thing happens.

Thank you so much for the the help :slight_smile:

Can you take a screenshot of your builder UI?

It’s not giving me the extra margin

Will have to do this in the morning as I’m heading to sleep. Will keep ya’ posted.

1 Like

Turns out this is an issue with Bubble (confirmed by them). For some reason, on mobile devices, a left/right padding is being inserted on the multiline input element. The padding size changes depending on the font size of the element. For now I was able to resolve it with the following code in the script/meta tags in header section.

<!-- Eliminate Unwanted White Space on Inputs -->
<style>
 #no-left-right-padding {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
</style>
1 Like