Warning: Can't synchronize with repository "(default)" (Unsupported version control system "svn": No module named svn). Look in the Trac log for more information.

Ticket #1914 (closed defect: fixed)

Opened 9 years ago

Last modified 8 years ago

Improper SPAN/DIV nesting in FieldSet widgets

Reported by: kvaml Owned by: Chris Arndt
Priority: normal Milestone: 1.1b2
Component: TurboGears Version: 1.0.4.4
Severity: normal Keywords: needs feedback
Cc:

Description (last modified by Chris Arndt) (diff)

Some form widgets produce unnecessary DIV elements. Since a span should not directly contain a div and the FieldSet widget wraps form filed widgets in a a SPAN element this can result in invalid HTML.

I've corrected the FieldSet? and CalendarDatePicker? templates.

Attachments

span-div-error.html Download (828 bytes) - added by kvaml 9 years ago.
sample html that can be easily submitted to w3.org validator.
big_widgets.patch Download (707 bytes) - added by kvaml 9 years ago.
forms.patch Download (986 bytes) - added by kvaml 9 years ago.
controllers.py Download (1.7 KB) - added by kvaml 9 years ago.

Change History

Changed 9 years ago by kvaml

sample html that can be easily submitted to w3.org validator.

Changed 9 years ago by kvaml

Changed 9 years ago by kvaml

comment:1 Changed 9 years ago by Chris Arndt

  • Milestone set to 1.1

Could you please provide some sample code with a form widget definition that produces the erroneous HTML code?

comment:2 Changed 9 years ago by kvaml

I used a simple TG generated application and modified it. The controllers.py and welcome.kid were modified and are attached. The widget code is pasted below.

It is still pretty clumsy to work with. Can you point me towards a better method for reporting html output problems?

PHRemail_address = dict(
    name = 'email_address',
    widgettype = widgets.TextField,
    label = 'Email Address',
    validator = validators.Email,
    )
PHRbirthdate = dict(
    name = 'bday',
    widgettype=widgets.CalendarDatePicker,
    label='Date of Birth (mm/dd/yyyy)',
    format='%m/%d/%Y',
    validator = validators.DateConverter(format="mm/dd/yyyy"),
    )
PHRpersonal_set = dict(
    name = 'personal_set',
    widgettype = widgets.FieldSet,
    widgetlist = [
        PHRemail_address,
        PHRbirthdate
        ],
    label='Personal Information',
    legend='Please fill in the fields',
    )

def make_widget(widgettype, name, widgetlist=None, **kwds):
    if widgetlist:
        fields = [make_widget(**w) for w in widgetlist]
        kwds['fields'] = fields
    return widgettype(name=name, **kwds)

spandiv = make_widget( **PHRpersonal_set)

'''
The generated HTML produces this error report from validator.w3.org

Error  Line 47, Column 22: document type does not allow element "DIV"
here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON"
start-tag.
            <span><div>
'''

Changed 9 years ago by kvaml

comment:3 Changed 9 years ago by kvaml

welcome.kid was rejected by the upload processor. I had simply added a line to process the form.

comment:4 Changed 9 years ago by Chris Arndt

I see your submission in the spam filter log. I marked it as not being spam so next time, hopefully, your submission will not be rejected.

The line added to welcome.kid is the following:

<div id="sidebar">
...

<span py:replace="form(value=values, action=action)"
  >Form Widgets Go Here</span>

</div>

Next time, you can just upload a tarball or zip with a full example project if this is more convenient for you.

comment:5 Changed 9 years ago by Chris Arndt

  • Owner changed from anonymous to Chris Arndt
  • Status changed from new to assigned
  • Description modified (diff)
  • Summary changed from Improper span div nesting in forms to Improper SPAN/DIV nesting in FieldSet widgets

Ok, now I see the error. I think your patch for forms.py is sensible and corresponds with the templates of the TableForm and ListForm templates, which also use py:replace for displaying the form field widgets. RepeatingFieldSet needs this change as well.

I don't think we should change the CalendarDatePicker template, though, because:

  1. It is not necessary to get the output validated after the template of FieldSet etc. is changed.
  2. It would be too complicated to apply CSS styling to all elements that make up the calendar widget without an enclosing element.
  3. The other big widgets (e.g. AutoCompleteField, AutoCompleteTextField, etc.) have an enclosing DIV element too.

On the other hand, the enclosing DIVs do not have any class or id attribute at the moment and so are hard to target with CSS rules. The DIVs are probably there because having py:strip on the root element did not work in earlier Kid versions. So maybe we should strip them from all big widgets or change them into SPAN elements with a proper class, so they can be targeted with CSS rules (and, for example, get a display: block style if necessary, so they act like DIV elements).

Anyway, these changes will go into the 1.1 branch only, because changing the element hierarchy of the HTML output of widgets may break the page layout of existing applications.

comment:6 Changed 9 years ago by Chris Arndt

Applied a preliminary fix (forms.py only) in r5269 to the 1.1 branch.

Waiting for feedback whether we should strip the DIVs around big widgets or change them into SPANs.

comment:7 Changed 9 years ago by Chris Arndt

  • Keywords needs feedback added

comment:8 Changed 9 years ago by Chris Arndt

  • Milestone changed from 1.1 to 1.1 beta 2

comment:9 Changed 9 years ago by faide

span + proper class smells better to me...

comment:10 Changed 9 years ago by Chris Arndt

  • Status changed from assigned to closed
  • Resolution set to fixed

Ok, I changed the root element of the CalendarDatePicker, AutoCompleteField and AutoCompleteTextField widgets to SPAN and added proper class attributes. I also added some basic tests for all three widgets (r5685).

comment:11 Changed 8 years ago by chrisz

The autocomplete.css file still referred to a DIV. I fixed this in r6619.

Note: See TracTickets for help on using tickets.