madisona/django-google-maps

Django admin AddressField not responsive

Closed this issue · 1 comments

On smaller screen sizes address field can go out of proportions and map disappears in django admin.
My code:

class CargoStatusAdmin(admin.ModelAdmin):
    model = CargoStatus

    list_display = ('id', 'cargo', 'address', 'date',)
    list_display_links = ('id',)
    search_fields = ('cargo__tracking_number', 'address', 'date')
    ordering = ('-cargo__created_at', '-date')
    autocomplete_fields = ('cargo', )

    formfield_overrides = {
        map_fields.AddressField: {'widget': map_widgets.GoogleMapsAddressWidget},
    }

Here is a screenshot for a small screen issue:
small_screen

Here is a screenshot for a mobile screen issue:
mobile_screen

Looked into it a bit more, found out that replacing

.map_canvas_wrapper {margin-left: 170px;}

with

.map_canvas_wrapper {width: 100%;}

in django_google_maps/static/django_google_maps/css/google-maps-admin.css fixes it.
However, after this change the map is no longer aligned right under the address input box on big screens which isn't really a big deal to me. Having margin-left: 170px; distorts the map on smaller screens so you might want to look into reworking that.