CODEWITHSUNDEEP
phpzend-frameworkzend-form
Thomas
Thomas

Reputation: 21601

Zend form input fields next to eachother

If you're reading this, you probably know how much of a pain it is to customize the layout of Zend form. What I want to achieve is a layout sort of like this:

Name: [Type your first name here][Type your last name here]
Address: [Type your street here][Type your number here][Type your addition here]

Does anyone know how to achieve this, or can anyone point me to a good example?

Upvotes: 2

Views: 1797

Answers (2)

user1069885
user1069885

Reputation:

What ends up happening, and I think this is a weakness of Zend_Form in general, is that you often want to be able to freely place the label as you see fit. Creating a custom decorator makes sense if you're going to reuse a display style - like if you're creating a Sharepoint like application - but in situations where the form is not going to be reused, or must be customized for space constraints, visual style, etc, creating decorators for each situation is too expensive. Decorators should be your second resort, i.e. when you like a display style and would like to use it everywhere in your site.

What you can do to get around this little bit of nik nak in O'Phinney's design is to drop the label from the decorators, but still set the label. Use a viewscript like this:

$form->setDecorators(array('ViewScript',array('viewScript' => 'path/from/views/scripts/of/module'));

In the viewscript, layout html like normal. This way you will not have to create an arbitrary structure for each variation of visual / structural display you want. 

$this->element->name;

will produce the label-less field.

$this>element->name->getLabel();

will produce the label text.

If you need some assistance as to how to enumerate the decorators to get this effect, usually if for instance you're using Dojo Elements, you'd have

array('DijitElement','Errors','HtmlTag','Label')

As your decorators.

Just drop label. If label is in an array like this

array('Label',array(...))

drop that array, since it represents the configuration for that decorator.

But of course, in the options make sure 'label'=> 'desired label' is set.

And now, in your form, you could drop in those elements as you please without having to be constrained where the labels should go!

Note if you're using default settings for decorators on your form fields, you might want to figure out what the default decorators ARE since when you begin setting them you may accidentally miss a decorator and lose something.

Upvotes: 1

Berry Ligtermoet
Berry Ligtermoet

Reputation: 881

What I would try and do is create custom Decorators for the form and different types of fields.

A form decorator for surrounding form elements

<form>%rows</form>

A row decorator to separate the rows

<div style="clear: both">%elements</div>

An element decorator that shows both label and element and floats all to the left 

<span style="float: left">%label</span>%left_floated_element

An element decorator that shows only the element and float it to the left

%left_floated_element

The output would result in something like:

<!-- Form decorator output -->
<form>
    <!-- Extra decorator to make sure you get rows -->
    <div style="clear: both">
        <!-- First element decorator output: label and element -->
        <span style="float: left">Name</span><input type="text" name="firstname" style="float: left" .../> 
        <!-- Second element decorator output: just the element -->
        <input type="text" name="lastname" style="float: left" .../> 
    </div>
    <!-- Extra decorator to make sure you get rows -->
    <div style="clear: both">
        <!-- First element decorator output: label and element -->
        <span style="float: left">Address</span><input type="text" name="street" style="float: left" .../> 
        <!-- Second element decorator output: just the element -->
        <input type="text" name="number" style="float: left" .../> 
        <!-- Second element decorator output: just the element -->
        <input type="text" name="addition" style="float: left" .../> 
    </div>
</form>

You can also change the used HTML to build a table rather than using divs to get the job done.

Check out the Zend Framework manual for more info on how to create your own custom decorators.

http://framework.zend.com/manual/en/zend.form.decorators.html

Upvotes: 2

Related Questions