Question

I am trying to override the default widget layout in Dexterity, where label, description, and entry area are on three separate lines:

Name
The person's name
[________________]

I’d like instead to have fields appear in a table with the form:

Name: [_____]

with “The person’s name” appearing (if at all) only when someone hovers over the area.

I’m able to override plone.app.z3cform.templates.macros.pt successfully using z3c.jbot; however, changes to the file plone.app.z3cform.templates.widget.pt have no effect I can locate. (See update just below.)

All the templates I find ask each individual widget to render itself, as a single unit with label and descriptive text, AFAICT using a view called @@ploneform-render-widget, but I’m unable to find any page templates associated with that view. Can anyone suggest where such templates would be?

[Update: Note that templates.py in plone.app.z3cform includes the following, which probably means that z3c.bjot is bypassed:
# The widget rendering templates need to be Zope 3 templates
class RenderWidget(ViewMixinForTemplates, BrowserView):
index = ViewPageTemplateFile(‘templates/widget.pt’)
class RenderSingleCheckboxWidget(ViewMixinForTemplates, BrowserView):
index = ViewPageTemplateFile(‘templates/singlecheckbox.pt’)

So, if that is the problem, what must be done to make this compatible with z3c.jbot?]

Thanks.

Answer 1

OK, Martijn Pieters has provided what I’m sure is good advice — do this using css and perhaps Javascript.

Let me share what has worked for me; hopefully people will point out where I’m using old stuff, where I’m being inappropriate, etc… But this is a starting point:

On my local machine, I create a file named project-css.css with the following contents:

.z3cformInlineValidation {
 float: left;
 position: relative;
 display: inline-block;
 background: red;
}
.z3cformInlineValidation label {
 float: left;
 width: 15em;
 background: yellow;
 text-align: right;
}
.z3cformInlineValidation div {
 display: inline;
}
.z3cformInlineValidation input {
 float: left;
 background: pink;
}
.z3cformInlineValidation input[class~="int-field"] {
 background: purple;
 width: 2em;

At least on my browser (not IE), this has the effect of putting input fields (an element of type input inside of an element of class z3cformInlineValidation ) after right aligned labels, at a column beginning about 15 em spaces into whatever box encloses the labels and input fields. The integer input fields, which are marked by zope/plone/z3cform/dexterity/? with the class “int-field,” are reduced in size so they don’t extend across the box. The “background” attributes are just there to see what’s going on, and can be removed.

Go to the zope management interface, select portal_skins, select custom, select “File” from the drop down list near the “Add” button at top right, then click “Add.” On the resulting screen, use project-css.css as your “id” and upload the file project-css.css

Go to the zope management interface, select portal_css, scroll to the bottom and fill in the “id” field with project-css.css. Then click “Add”.

The CSS will then rearrange all Dexterity default form output, I believe.

To restrict it so that it is only used by my form, I’ve found a condition statement included in the portal_css for project-css.css like this to work (there are no quotes around the complete expression)

python: request.URL.endswith('end_of_applicable_url') 

I’m sure there are more appropriate ways, and I would be grateful if someone would point them out.

As when I last visited Zope/Plone, I find the capabilities tantalizing, but the documentation, while MUCH improved, still seems to leave out one or two of the little magic things that a beginner needs to get rapidly up to speed, probably because they are so obvious to those who use the product on a day to day basis.