Additional form label formatting?

[radeski]

Hi all,

I haven't been able to find anything posted on this issue, so I decided to start a new thread. I've created a simple "Register" page and I would like to create separate logical groups of fields by separating them with an header image or a few extra
spaces, etc. Is this possible? To illustrate my question:


PERSONAL INFO
Your Name |_______|
E-mail |_______|

ANOTHER SECTION
Favourite Food |_______|
Favourite Drink |_______|


|__Register__|


Thanks in advance, this is a fantastic application Steve!

Radek

[shannah]

You can use groups to separate fields in this way.

e.g.

[name]
group=personal

[email]
group=personal

[favourite_food]
group=another_section

[favourite_drink]
group=another_section


And if you want to change the label for the group, you can specify this information also in the fields.ini file:

[fieldgroup:personal]
label="Personal Information"

[fieldgroup:another_section]
label="Another Section"

Hope this helps.

-Steve

[radeski]

It's THAT simple, eh? Thank you, this is fantastic.

One little observation: field descriptors (widget:description) do not appear below fields anymore -- instead they are inserted next to the field. I've tried settings margins of each field with CSS to correct this, but to no avail.

Radek

[shannah]

Currently the layout in groups is a little different. This has been changed for the next release (0., but for now, you'll have to make the mods yourself if you want to change it. CSS is a good strategy.

Alternatively you can override the templates pertaining to form widgets:
Dataface_QuickForm_element.html
Dataface_Quickform_group.html
Dataface_Quickform_groupelement.html

You'll find these templates in the Dataface/templates directory. I believe the one you will probably be interested in is the last one (groupelement.html).

It is better not to make changes directly to these templates. Rather you should copy any templates you wish to modify into your application's templates directory, and then make changes to the copies. They will automatically override the dataface template with the corresponding name.

Best regards

Steve

[radeski]

Steve:

Perhaps I'm doing something wrong, but I've noticed that dataface does not use any of the Dataface_Quickform_..... templates I copied to my app's "templates" directory. This directory currently has the following files:

Dataface_Main_Template.html
Dataface_QuickForm_element.html
Dataface_Quickform_group.html
Dataface_Quickform_groupelement.html

I'll be grateful for any suggestions you might have.

Thanks!
Radek

[shannah]

hmm... It should be picking them up. There are some "if" statements inside a lot of these templates that cause different parts of the template to show in different circumstances. Perhaps try making some DRASTIC changes to the templates to confirm that they aren't being picked up.

For the next version I have changed the way the forms are generated (still HTML QuickForm but using different templates) to make this sort of thing easier. Unfortunately any changes that you make to these templates won't be effective when you upgrade to the new dataface when it is released.

If you're sure they're not being picked up, let me know, and I'll take a closer look.

-Steve

[radeski]

Hi again

What I wanted to change was some of the class options to enable custom background images for each group (is this even possible?) In any case, I created a .fieldgroup class in my css file and it worked OK. However, changing the .fieldgroup entry in any of the template files has no effect - I discovered that it has to be done in the QuickForm.php file directly (function getFieldGroupTemplate($name))

I'm not really a programmer, so perhaps I'm missing something very elementary? Going back to my original intention, can I apply different css styles to different groups?

Thanks very much for your help Steve.

Radek

[shannah]

The easy answer is "YES". You can apply CSS styles to just about anything. The best way to do it is to just select "View Source" in your browser when you are viewing the edit form. Look at the markup for the fieldgroup in question (the fieldset tag), then figure out how to address this uniquely using CSS.

I don't have the particulars off the top of my head, sorry.

-Steve