Why does the icon group break this input?

I have created an input for mobile phones, and added a flag drop to the input down to help users format the number.

It works great, but the flag is shifted upwards when I include a grouped icon next to the input element.

Screen Shot 2020-10-28 at 11.04.15 am

Why is this happening?

Does anyone have a hint at what’s going on? I’ve been trying to solve this simple problem all day without any luck.

Are the input and flag grouped together?

The input is a standard bubble element, and the flag inserted via a JS library. So they’re grouped together when looking at the HTML, but not grouped in the normal Bubble sense because the flags are added using JS and not the Bubble editor.

The resulting HTML looks like this. But this is trimmed down version, you’ll have to check the live site to see everything because I removed everything inside the iti__flag-container div for the sake of brevity:

<div class="iti iti--allow-dropdown">
   <div class="iti__flag-container"></div>
   <input type="input" class="bubble-element Input black" tabindex="28" maxlength="" inputmode="numeric" id="PhoneInput" style="border: none; background-color: transparent; top: 20px; position: absolute; box-sizing: border-box; z-index: 6; height: 25px; border-radius: 0px; font-family: &quot;Public Sans&quot;; font-size: 14px; color: rgb(34, 34, 34); letter-spacing: 0.25px; word-spacing: 1px; padding: 0px 10px; transition: border-color 200ms ease 0s, box-shadow 200ms ease 0s; width: 448px; left: 0px;" autocomplete="off" data-intl-tel-input-id="0">

It’s really weird - because I’m struggling to understand why that icon group would have any impact on the input at all.

This problem has now disappeared…

Maybe the editor got updated?

Not sure why, but it’s working as expected now.

Ok actually after looking around it wasn’t an editor update that fixed it.

The solution was to wrap the entire thing in another group.

So the input is in a HTML div (generated by the JS library), and all of which is inside a standard bubble group.

1 Like

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