[Zope3-dev] Aesthetics of generated forms

[Peter Mayne]

I have an Interface that contains a List, and I've been staring at the 
automatically generated edit form a bit.

The generated form uses HTML of the form:

   <div class="row">
     <div class="label">FieldLabel</div>
     <div class="field">FieldData</div>
   </div>

The resulting output looks like:

     Label1    Data1
     Label2
Data2WhichIsABitLonger

This tends to look untidy, because short data appears next to the label, 
while longer data wraps to the next line and is not indented. In 
particular, when editing data in a list (eg the Poll demo), data can 
come out as

     Label1    Data1    Label2
Data2

Since wrapping depends on the current width, and widgets in lists have a 
lot less width to work in, the problem is exacerbated.

This seems to be caused by the "div.row div {float: left;}" entry in the 
rotterdam CSS. Removing that (even though it's presumably there for a 
good reason) makes things a lot more regular. I've also replaced the 
<div>s in widget_macros.pt with definitions (<dl><dt><dd>), which tend 
to look a bit better (a personal point of view, admittedly).

I haven't experimented enough to see how error messages fit in, but 
changing the field and errors <div>s to <span>s within the <dd> might do 
the trick.

Does any of this seem reasonable?

PJDM
-- 
Peter Mayne
Spherion Technology Solutions
Canberra, ACT, Australia
"I'm after rebellion, I'll settle for lies" - Blue Oyster Cult