Tuesday, February 5, 2013

Zend Framework 1 or 2? Check-box and Label Alignment with CSS

Greetings programs,

I have been programming on the Zend Framework for a few years now. I have put off solving some very simple but super annoying problems. Well, I have found some time and am finally going to solve a problem that has been a major problem for my Zend Forms. "Checkbox and label alignment".

Like most Login forms I have a 'remember me' check box. Every time I use/reuse this form the check box is below the label getting tangled up in my submit button. This is just annoying. It turns out the best way to solve the problem is with CSS and it's really simple.

So here is my form Application_From_User_Login function for creating the check box. Nothing out of the ordinary here.
...
I have an abstract decoration that decorates any zend form element that I put on a form in a consistent manor. The call to _decorateCheckBox($remember) creates the html format for this particular check box and all other check boxes i might use. So lets' look at that code below.
...
This decorator creates a structure that looks like the following:...
...
This is what it looks like when I render the form in my application. Notice the check box is below the label.

The solution is simple. The label has to be styled 'inline'. Here is the CSS. ...
The resulting login form looks much better. Really simple fix.


Tron: My User has information that could... that could make this a free system again! No, really! You'd have programs lined up just to use this place, and no MCP looking over your shoulder.