Zend Form Checkbox element and label on the same line

[Alan Wagstaff]

Hi all,

I have added a "Remember me" checkbox to my login form and am having
troubles getting the label and checkbox to appear on the same line.
Specificly, I'm trying to get the checkbox to appear before the label.

Here's a screenshot of what it currently looks like:

Loading Image...

And here is the relavant bits of code for my checkbox element:

------------------------------------
// Remember me Checkbox
$elements['remember_me'] = new Zend_Form_Element_Checkbox('remember_me');
$elements['remember_me']->setRequired(false);
$elements['remember_me']->setLabel('Remember Me');
$elements['remember_me']->setDescription('(Not recommended for public
computers)');
$elements['remember_me']->setAttrib('checked', false);

// Add the elements to the form
$loginForm->addElement($elements['remember_me']);

// Form decorators
$loginForm->setDecorators(array(
array('FormElements', array('separator' => '<br/>')),
array('HtmlTag', array('tag' => 'div', 'class' => 'form')),
'Form')
);

// Element decorators
$loginForm->setElementDecorators(array(
'ViewHelper',
array('Description', array('tag' => 'div', 'placement' => 'PREPEND')),
'Errors',
'HtmlTag',
array('Label', array('tag' => 'strong', 'class' => 'form_element_label')),
));

// Custom element decorators
$loginForm->remember_me->addDecorator('Description', array('tag' =>
'div', 'placement' => 'APPEND'));
------------------------------------

And finally, here is the HTML that it produces for the checkbox element:

------------------------------------
<strong><label for="remember_me" class="form_element_label
optional">Remember Me</label></strong>
<div>
<input type="checkbox" name="remember_me" id="remember_me" value="" />
<div class="hint">
(Not recommended for public computers)
</div>
</div>
------------------------------------

I have tried removing my custom form / element decorators and using a
few examples previously posted here on the mailing list but all I can
manage is to get the label to appear below the checkbox rather than on
the same line.

Hoping a decorator expert can help :)

Thanks,
Al

[Amr Mostafa]

I advice you to use CSS to achieve that.
One thing you could do, is to add a 'inline' class to your label. Like this:

$form->remember_me->getDecorator('Label')->setOption('class', 'inline');

Then in your CSS something like:

label.inline {
display: inline;
/* or */
float: left;
margin-right: 5px;
}

Or if you want the checkbox to be on the left of the label, then give
'inline' class to the element itself instead. And apply the CSS on
input.inline.

Hope this helps,
- Amr

Post by Alan Wagstaff
Hi all,
I have added a "Remember me" checkbox to my login form and am having
troubles getting the label and checkbox to appear on the same line.
Specificly, I'm trying to get the checkbox to appear before the label.
http://i77.photobucket.com/albums/j49/citalan/remember_me_checkbox_1.jpg
------------------------------------
// Remember me Checkbox
$elements['remember_me'] = new Zend_Form_Element_Checkbox('remember_me');
$elements['remember_me']->setRequired(false);
$elements['remember_me']->setLabel('Remember Me');
$elements['remember_me']->setDescription('(Not recommended for public
computers)');
$elements['remember_me']->setAttrib('checked', false);
// Add the elements to the form
$loginForm->addElement($elements['remember_me']);
// Form decorators
$loginForm->setDecorators(array(
array('FormElements', array('separator' => '<br/>')),
array('HtmlTag', array('tag' => 'div', 'class' => 'form')),
'Form')
);
// Element decorators
$loginForm->setElementDecorators(array(
'ViewHelper',
array('Description', array('tag' => 'div', 'placement' => 'PREPEND')),
'Errors',
'HtmlTag',
array('Label', array('tag' => 'strong', 'class' => 'form_element_label')),
));
// Custom element decorators
$loginForm->remember_me->addDecorator('Description', array('tag' =>
'div', 'placement' => 'APPEND'));
------------------------------------
------------------------------------
<strong><label for="remember_me" class="form_element_label
optional">Remember Me</label></strong>
<div>
<input type="checkbox" name="remember_me" id="remember_me" value="" />
<div class="hint">
(Not recommended for public computers)
</div>
</div>
------------------------------------
I have tried removing my custom form / element decorators and using a
few examples previously posted here on the mailing list but all I can
manage is to get the label to appear below the checkbox rather than on
the same line.
Hoping a decorator expert can help :)
Thanks,
Al

[Alan Wagstaff]

oops, forgot to send to the mailing list.

---------- Forwarded message ----------
From: Alan Wagstaff <awagstaff-***@public.gmane.org>
Date: 20 Feb 2008 13:09
Subject: Re: [fw-general] Zend Form Checkbox element and label on the same line
To: Amr Mostafa <amr.mostafa-***@public.gmane.org>


Thanks Amr, it didn't occur to me to use CSS. I've been playing about
with your code below and have managed to get the checkbox to appear to
the right of the label, or the checkbox to appear to the left of the
description, but can't seem to get the checkbox to appear to the left
of the label yet.

Thanks for pointing me in the right direction, a little more fiddling
and it'll be perfect :)

Thanks,
Al.

Post by Amr Mostafa
I advice you to use CSS to achieve that.
$form->remember_me->getDecorator('Label')->setOption('class',
'inline');
label.inline {
display: inline;
/* or */
float: left;
margin-right: 5px;
}
Or if you want the checkbox to be on the left of the label, then give
'inline' class to the element itself instead. And apply the CSS on
input.inline.
Hope this helps,
- Amr

Post by Alan Wagstaff
Hi all,
I have added a "Remember me" checkbox to my login form and am having
troubles getting the label and checkbox to appear on the same line.
Specificly, I'm trying to get the checkbox to appear before the label.

http://i77.photobucket.com/albums/j49/citalan/remember_me_checkbox_1.jpg

Post by Alan Wagstaff
------------------------------------
// Remember me Checkbox
$elements['remember_me'] = new

Zend_Form_Element_Checkbox('remember_me');

Post by Alan Wagstaff
$elements['remember_me']->setRequired(false);
$elements['remember_me']->setLabel('Remember Me');
$elements['remember_me']->setDescription('(Not

recommended for public

Post by Alan Wagstaff
computers)');
$elements['remember_me']->setAttrib('checked', false);
// Add the elements to the form
$loginForm->addElement($elements['remember_me']);
// Form decorators
$loginForm->setDecorators(array(
array('FormElements', array('separator' => '<br/>')),
array('HtmlTag', array('tag' => 'div', 'class' => 'form')),
'Form')
);
// Element decorators
$loginForm->setElementDecorators(array(
'ViewHelper',
array('Description', array('tag' => 'div', 'placement' => 'PREPEND')),
'Errors',
'HtmlTag',
array('Label', array('tag' => 'strong', 'class' => 'form_element_label')),
));
// Custom element decorators
$loginForm->remember_me->addDecorator('Description',

array('tag' =>

Post by Alan Wagstaff
'div', 'placement' => 'APPEND'));
------------------------------------
------------------------------------
<strong><label for="remember_me" class="form_element_label
optional">Remember Me</label></strong>
<div>
<input type="checkbox" name="remember_me" id="remember_me" value="" />
<div class="hint">
(Not recommended for public computers)
</div>
</div>
------------------------------------
I have tried removing my custom form / element decorators and using a
few examples previously posted here on the mailing list but all I can
manage is to get the label to appear below the checkbox rather than on
the same line.
Hoping a decorator expert can help :)
Thanks,
Al