#27055: Model form for MultiPolygonField has invalid html ----------------------------+-------------------- Reporter: aptiko | Owner: nobody Type: Bug | Status: new Component: GIS | Version: 1.10 Severity: Normal | Keywords: Triage Stage: Unreviewed | Has patch: 0 Easy pickings: 0 | UI/UX: 0 ----------------------------+-------------------- == Synopsis ==
I have a model with a `MultiPolygonField`. I have Django automatically create a form for it (using a `CreateView`). I show the form on a template with `{{ form.as_p}}`. The result is invalid HTML; it has `<style>` inside a `<p>`. The reason for this is that the MultiPolygonField is rendered with a `django.contrib.gis.forms.widgets.OpenLayersWidget`, which uses `django/contrib/gis/templates/gis/openlayers.html`. This template contains a `<style>` element followed by a `<div>` element. Apparently whenever some other code elsewhere decides to show the widget, it wraps it in a `<p>` or in a `<td>` (I've also seen it wrapped in a `<div>`). == How to reproduce == 1) Create or clone the minimal project. If you prefer to clone it, it's at https://github.com/aptiko/testgishtml. It's only three commits, of which the first two commits only contain the empty django project and app created by `django-admin startproject` and `./manage.py startapp`, so if you merely `git show` when you are at master it will show you all the custom code. If you prefer to do it manually, first `django-admin startproject testgishtml`, then do the following: * `./manage.py startapp gishtml`. * Replace file `gishtml/models.py` with this: {{{#!python from django.contrib.gis.db import models class Polygon(models.Model): mpoly = models.MultiPolygonField() }}} * Replace `gishtml/views.py` with this: {{{#!python from django.views.generic import CreateView from .models import Polygon class CreatePolygonView(CreateView): model = Polygon template_name = 'create_polygon.html' fields = ('mpoly',) }}} * Add file `gishtml/templates/create_polygon.html`: {{{ <!DOCTYPE html> <title>Create polygon</title> {{ form.as_p }} }}} * Add `django.contrib.gis` and `gishtml` to `INSTALLED_APPS`. * Add `url(r'^', gishtml.views.CreatePolygonView.as_view())` to `urlpatterns`. 2) Run `./manage.py migrate` and `./manage.py runserver`. 3) Visit http://localhost:8000/ == Results == {{{ <!DOCTYPE html> <title>Create polygon</title> <p><label for="id_mpoly">Mpoly:</label> <style type="text/css"> #id_mpoly_map { width: 600px; height: 400px; } #id_mpoly_map .aligned label { float: inherit; } #id_mpoly_div_map { position: relative; vertical-align: top; float: left; } #id_mpoly { display: none; } .olControlEditingToolbar .olControlModifyFeatureItemActive { background-image: url("/static/admin/img/gis/move_vertex_on.svg"); background-repeat: no-repeat; } .olControlEditingToolbar .olControlModifyFeatureItemInactive { background-image: url("/static/admin/img/gis/move_vertex_off.svg"); background-repeat: no-repeat; } </style> <div id="id_mpoly_div_map"> <div id="id_mpoly_map"></div> <span class="clear_features"><a href="javascript:geodjango_mpoly.clearFeatures()">Delete all Features</a></span> <textarea id="id_mpoly" class="vSerializedField required" cols="150" rows="10" name="mpoly"></textarea> <script type="text/javascript"> var map_options = {}; var options = { geom_name: 'MultiPolygon', id: 'id_mpoly', map_id: 'id_mpoly_map', map_options: map_options, map_srid: 4326, name: 'mpoly' }; var geodjango_mpoly = new MapWidget(options); </script> </div> </p> }}} If you feed this to http://validator.w3.org/, it says "Element `style` not allowed as child of element `p` in this context". -- Ticket URL: <https://code.djangoproject.com/ticket/27055> Django <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To post to this group, send email to django-updates@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/049.b0d9b6a298a3dd552950c72a0c3f3282%40djangoproject.com. For more options, visit https://groups.google.com/d/optout.