Designer Device Frame Clipping Issue in Android Preview (Neo UI)

The simulated phone frame does not properly clip the app content. Elements like the Leaflet attribution/footer overflow outside the visible phone border.


Description

In the MIT App Inventor Designer (Neo UI), the simulated Android device frame does not correctly clip the app content.

When using the Map component, UI elements (e.g., Leaflet attribution/footer) extend beyond the visible phone frame boundary. This creates a visually incorrect preview where content appears outside the device.

Steps to Reproduce

  1. Create a new project
  2. Add a Map component to Screen1
  3. Set Map height to Fill Parent
  4. Switch preview to:
  • Android 5+ (Material) OR Android 3
  1. Observe the bottom area of the screen

Expected Behavior

  • All UI content should be properly clipped within the simulated phone frame
  • No elements should render outside the device boundary

Actual Behavior

  • Bottom UI elements overflow outside the phone frame
  • Device frame clipping appears broken in Android preview
  • iOS preview does not show this issue

Additional Notes

  • The issue does not affect runtime behavior (works correctly on real device / companion)
  • This appears to be a Designer-only rendering issue (CSS / viewport clipping bug)

No issue here:

Android 5+ Material, Phone (320x650)
(map set to fill parent both ways)

1 Like

You're right — after further testing, this appears to be project-specific rather than a general issue with the Designer.

I created a fresh project with the same configuration (Map set to Fill Parent), and the clipping behaves correctly there. So the overflow I observed seems to be caused by my layout/setup in that particular project.

Appreciate you checking and confirming on your side :+1:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.