Input box half hidden on mobile with bottom menu

[mark20]

Video 05.16.2023-15.48.40
No matter what I try, on mobile, it hides most of the box and I cannot scroll down?

[J805]

Hmm

Can you add a bottom margin on the page level? I normally put my whole ‘page’ inside one group and then add the margins on that group. It looks like you have a floating group at the bottom. Make sure the bottom margin is at least more than that height.

Does that help a bit?

[mark20]

Hi JB05,
Unfortunately, its not set up as a floating element. Only a group. I tried to change it to a floating element but, it really messed up everything i had. So no luck there. I also tried the margins and not luck there either Any other thoughts? Thanks for your help.

[J805]

Hmm Are one of your groups 100% height?

[mark20]

Yes. Actually a few of them are.

[J805]

Those are always difficult to use. You can try like 90% maybe.

You might be able to do one group at 100% but the inner groups or elements to have a bottom margin. That might work. Normally a floating group is a bit easier to work with since you just need a bottom margin on the page. I don’t normally use % because it gets tricky. I only use them for hero elements or for chat windows.

[mark20]

i have probably tried every solution twice. Even Chatgpt. No luck
If an input box on Bubble.io is partially hidden on a mobile device, it’s likely because of the arrangement or the dimension settings of your elements, or a conflict with another element such as a bottom menu. Here are some potential solutions to fix the issue:

1. Check your design settings: Make sure that your input box and any surrounding elements are set up to work properly on mobile. Bubble.io provides a “Responsive” tab where you can adjust how your elements appear on different screen sizes. You might need to adjust the min. width, max. width, and/or responsiveness settings for your elements.
2. Using conditional formatting: In the “Conditions” tab of the input box, add a new condition. Choose “When this Input is focused” and then select “Scroll to this element” as the action. This way, whenever your input box is selected on a mobile device, the page will automatically scroll to that input box, preventing it from being hidden.
3. Adjust Z-Index: The Z-index determines the stack order of elements that overlap. The element with the greater stack order is always in front of an element with a lower stack order. If your input box is hidden behind the bottom menu, you can try adjusting the Z-index of the input box to a higher value than the menu.
4. Avoid Fixed elements: Fixed elements, such as a footer, can sometimes create issues on mobile. You might want to consider making the bottom menu a floating group set to “float relative to bottom” if it isn’t already.
5. Using a group focus: Instead of having an input directly, you can use a group focus with the input inside. You can set this group to open when the user clicks on a text or button for input, it will position itself avoiding overlap with other elements.
6. Check the visibility condition: Make sure the visibility condition for the input box and menu is set correctly. If the condition for showing the input box and menu is set in such a way that they overlap, it might hide the input box.
7. Check the height of your page: If your page height is too short, elements might not display properly on mobile devices. You might need to increase the height of your page to solve this issue.

[J805]

Even if I give you a working example, it’s hard to fix without trying a few different things together. Coaching sessions are usually good for this sort of thing.

Otherwise, try not using percentage for heights and use a column group so the element can scroll down the page. Work on making the footer into a floating group. I’m not sure why changing your group into a floating group would cause many errors. Maybe you can share some of the errors so we can help you work through them.

Hope that helps a bit.

[mark20]

Thanks J805. I will take a break and try again next week. A refreshed mind might be the trick. I will let you know. Have a good weekend.

[J805]

That always helps. Have a good weekend.

[mark20]

Hi J805,

I recently resolved the problem with my main page’s floating group where I found an unnecessary 300% height property. Upon removing it, the issue was resolved. Thanks for your help.

Odd. Another quirk that i spotted over the weekend and, its again connected to the floating group.

Clicking the address box triggers the sidebar perfectly.
I used the ‘collapse when hidden’ option for the space that the hidden header occupies, hoping it would eliminate the extra space and allow the sidebar to appear correctly. Unfortunately, this has led to a new complication: with the ‘collapse when hidden’ feature active, clicking the address box the sidebar does not appear and only shows up at the bottom of the screen upon scrolling down as a floating ‘bar’ .

I’d truly appreciate any advice or potential solutions to this issue. Thank you for your time and assistance!. If you have the time, you are welcome to go in and have a look.

[J805]

Hmm That’s tricky without seeing more of your project.

I would suggest looking for anything else that might be using a percentage. These are hard to work with. You can also check to make sure ‘collapse when hidden’ is checked for any elements that are hidden.

I recommend using the inspect tool to see if there is a group there and what it is called. Then you can check the editor for that group or element and see how to fix it.

[mark20]

@J805

using a percentage

Hi j805,

Sorted. There was an obscure 150% attached to a fixed title.
Thank you for all your help.
Mark

[J805]

Glad you found it.