#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 [email protected].
To post to this group, send email to [email protected].
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.
