Custom map module overflow issue

App Building
, , ,
1

Hello everyone. I am building a custom map module using google map api. Everything except overflow issue is perfect. As you see below image, when I set height variable to fixed and tried to resize module on my parent app, map is overflowing. I can resize horizontally without problem but vertically both making smaller or taller is overflow. I also added a video to make the problem clear.

Video Link: https://www.youtube.com/watch?v=M5lBMXgsQ-k

Screenshot 2024-03-25 at 06.19.33
Screenshot 2024-03-25 at 06.19.33798×1154 135 KB

And these are div definition in module iframe.

<div id="googleMap" style="width:100%;height:100%;padding:0;margin:0;left:0;top:0;box-sizing: border-box;"></div>

Can anyone help me? Thank you.

1 Like
2

I need help guys. Please if anyone know about this issue, I am very open to get help.

1 Like
3

hey @safayildirim

sorry it's been a while before anyone found this. i was searching for a solution to module overflow and figured i'd offer a workaround:

put your HTML component inside a container (remove the margin, padding, and border if you'd like) and then set the container's overflow to hidden if you don't mind losing the zoom buttons. otherwise you might try to hard-code the height to a smaller percentage.

1 Like