Skip to content

fix: use relative positioning for default map size - #133

Open
Jettonn wants to merge 1 commit into
AlexLavoie42:mainfrom
Jettonn:fix/default-map-size-positioning
Open

fix: use relative positioning for default map size#133
Jettonn wants to merge 1 commit into
AlexLavoie42:mainfrom
Jettonn:fix/default-map-size-positioning

Conversation

@Jettonn

@Jettonn Jettonn commented Mar 14, 2026

Copy link
Copy Markdown

Summary

  • Replace position: absolute; top: 0; bottom: 0 with width: 100%; height: 100% in the .mapboxgl-default-map-size default CSS
  • The absolute positioning takes the map out of document flow, causing layout issues when the map shares a container with other content (e.g. cards, headers)
  • Users who need absolute positioning can still apply it via :style or :class attrs

Fixes #67

The default CSS for `.mapboxgl-default-map-size` uses `position: absolute`
which takes the map out of document flow. This causes layout issues when
the map is not the only content in a container — for example, when location
cards sit above the map, the absolute positioning makes the map overlap them.

Replace `position: absolute; top: 0; bottom: 0` with `width: 100%; height: 100%`
so the map fills its parent naturally. Users who need absolute positioning can
still apply it via the `:style` or `:class` attrs.

Fixes AlexLavoie42#67
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Map disappears on screen sizes less than tailwinds lg breakpoint

1 participant