Input element over lapping when responsive

Hey folks!

Does any one know why 2 elements would overlap (when a page is responsive)?

I have a page that I’m using for sign ups ( which works well on desktop but on mobile the password element is being overlapped by the password confirmation element. Screen shots below


iPad: (password and confirmation begin to overlap)

Mobile: (notice password box is gone)

Hi @cory :slight_smile: Welcome to the Forum!

Sometimes elements overlap when they are on top of other elements. Are either of the dark grey overlays shape elements? If so, you can switch these to group elements instead, so the inputs are contained within those groups. That should make sure the inputs on the right-side move to the next line, beneath the left-side elements as the page gets more narrow.

If that doesn’t do it, let me know and I’d be happy to take a look at the app editor! :slight_smile:

1 Like

Hey Faye,

Thanks for responding!

I confirmed that both input elements are contained with in a group, which is that dark background element.

1 Like

@cory have you one dark background element or two? @fayewatson seems to assume two but you answered referring to one. Therein may lie the solution. Have you tried combining all the element on the left into a transparent group than doing the same for all the elements on the right? That would be a good starting point if that’s not already the case.

If that doesn’t work, and I had a very similar problem myself recently, then check the min/max sizes are identical to other elements, then check in the responsive editor to ensure all attributes are the same there. If all else fails, and it did for me, try adding two new fields, see if they behave correctly and if ‘yes’ then delete the misbehaving fields. I’ve found that final step often works in bubble.


Thanks! I ended up cloning two of the other inputs and replacing the existing ones. Which did the trick.

1 Like

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