Refs #25706 -- Removed inline CSS in the openlayers widget template.

3 files changed, 15 insertions, 10 deletions

diff --git a/django/contrib/gis/static/gis/css/ol3.css b/django/contrib/gis/static/gis/css/ol3.css
index 9c8a9f5e06..ac8f0a8ec2 100644
--- a/django/contrib/gis/static/gis/css/ol3.css
+++ b/django/contrib/gis/static/gis/css/ol3.css
@@ -1,3 +1,11 @@
+.dj_map_wrapper {
+    position: relative;
+    float: left;
+}
+html[dir="rtl"] .dj_map_wrapper {
+    float: right;
+}
+
 .switch-type {
     background-repeat: no-repeat;
     cursor: pointer;
diff --git a/django/contrib/gis/static/gis/js/OLMapWidget.js b/django/contrib/gis/static/gis/js/OLMapWidget.js
index 9dea7d05aa..839c8cd7cc 100644
--- a/django/contrib/gis/static/gis/js/OLMapWidget.js
+++ b/django/contrib/gis/static/gis/js/OLMapWidget.js
@@ -61,6 +61,9 @@ class MapWidget {
             this.options.base_layer = new ol.layer.Tile({source: new ol.source.OSM()});
         }
 
+        const mapContainer = document.getElementById(this.options.map_id);
+        mapContainer.style.width = `${mapContainer.dataset.width}px`;
+        mapContainer.style.height = `${mapContainer.dataset.height}px`;
         this.map = this.createMap();
         this.featureCollection = new ol.Collection();
         this.featureOverlay = new ol.layer.Vector({
diff --git a/django/contrib/gis/templates/gis/openlayers.html b/django/contrib/gis/templates/gis/openlayers.html
index fa336469b8..bde2650ca2 100644
--- a/django/contrib/gis/templates/gis/openlayers.html
+++ b/django/contrib/gis/templates/gis/openlayers.html
@@ -1,17 +1,11 @@
 {% load i18n l10n %}
-<style type="text/css">{% block map_css %}{% get_current_language_bidi as LANGUAGE_BIDI %}
-    #{{ id }}_map { width: {{ map_width }}px; height: {{ map_height }}px; }
-    #{{ id }}_map .aligned label { float: inherit; }
-    #{{ id }}_div_map { position: relative; vertical-align: top; float: {{ LANGUAGE_BIDI|yesno:"right,left" }}; }
-    {% if not display_raw %}#{{ id }} { display: none; }{% endif %}
-    {% endblock %}
-</style>
 
-<div id="{{ id }}_div_map">
-    <div id="{{ id }}_map"></div>
+<div id="{{ id }}_div_map" class="dj_map_wrapper">
+    <div id="{{ id }}_map" class="dj_map" data-width="{{ map_width }}" data-height="{{ map_height }}"></div>
     {% if not disabled %}<span class="clear_features"><a href="">{% translate "Delete all Features" %}</a></span>{% endif %}
     {% if display_raw %}<p>{% translate "Debugging window (serialized value)" %}</p>{% endif %}
-    <textarea id="{{ id }}" class="vSerializedField required" cols="150" rows="10" name="{{ name }}">{{ serialized }}</textarea>
+    <textarea id="{{ id }}" class="vSerializedField required" cols="150" rows="10" name="{{ name }}"
+              {% if not display_raw %} hidden{% endif %}>{{ serialized }}</textarea>
     <script>
         {% block base_layer %}
             var base_layer = new ol.layer.Tile({