Zend_Form decorator changes & sample css

[Eric Coleman-3]

Does anyone have any sample css for styling the "new" output from  
Zend_Form?  I had a terrible time trying to get something looking  
right with the groups/subforms being instead a dd, and was curious if  
anyone really tried yet to make them look pretty :-d

Regards,
Eric

[Neil Garb]

I think that's one big problem with definition lists in this case: the
dt/dd combo has no wrapping element so it's difficult to use
'clearfix' techniques to get IE6 (and I think other browsers, too) to
render floating elements correctly.

- Neil

http://codecaine.co.za/blog/

On Jan 22, 2008 9:47 PM, Eric Coleman <eric@...> wrote:
> Does anyone have any sample css for styling the "new" output from
> Zend_Form?  I had a terrible time trying to get something looking
> right with the groups/subforms being instead a dd, and was curious if
> anyone really tried yet to make them look pretty :-d
>
> Regards,
> Eric
>
>

[Hector Virgen]

This website has some good examples of how to style definitions lists.
Maybe this one will work for you?

http://www.maxdesign.com.au/presentation/definition/dl-table-display2.htm


Neil Garb wrote:

> I think that's one big problem with definition lists in this case: the
> dt/dd combo has no wrapping element so it's difficult to use
> 'clearfix' techniques to get IE6 (and I think other browsers, too) to
> render floating elements correctly.
>
> - Neil
>
> http://codecaine.co.za/blog/
>
> On Jan 22, 2008 9:47 PM, Eric Coleman <eric@...> wrote:
>  
>> Does anyone have any sample css for styling the "new" output from
>> Zend_Form?  I had a terrible time trying to get something looking
>> right with the groups/subforms being instead a dd, and was curious if
>> anyone really tried yet to make them look pretty :-d
>>
>> Regards,
>> Eric
>>
>>
>>    
>
>
>  

[Matthew Weier O'Phinney-3]

-- Neil Garb <neil.garb@...> wrote
(on Tuesday, 22 January 2008, 09:52 PM +0200):
> I think that's one big problem with definition lists in this case: the
> dt/dd combo has no wrapping element so it's difficult to use
> 'clearfix' techniques to get IE6 (and I think other browsers, too) to
> render floating elements correctly.

It's going to be tricky whenever you're using display groups or subforms
to have an auto-rendering technique that is clean and easy to use with
CSS. If you have a complex form, you're probably better off creating
your own decorators or simply creating the form from the form + elements
within a view script.

> On Jan 22, 2008 9:47 PM, Eric Coleman <eric@...> wrote:
> > Does anyone have any sample css for styling the "new" output from
> > Zend_Form?  I had a terrible time trying to get something looking
> > right with the groups/subforms being instead a dd, and was curious if
> > anyone really tried yet to make them look pretty :-d

--
Matthew Weier O'Phinney
PHP Developer            | matthew@...
Zend - The PHP Company   | http://www.zend.com/

[Mark Maynereid]

I just want to chime in with this. Since the default changed to dt/dd,
unstyled forms look a bit weird now. Any CSS tips would be welcome.

On Tuesday 22 January 2008 19:52, Neil Garb wrote:

> I think that's one big problem with definition lists in this case: the
> dt/dd combo has no wrapping element so it's difficult to use
> 'clearfix' techniques to get IE6 (and I think other browsers, too) to
> render floating elements correctly.
>
> - Neil
>
> http://codecaine.co.za/blog/
>
> On Jan 22, 2008 9:47 PM, Eric Coleman <eric@...> wrote:
> > Does anyone have any sample css for styling the "new" output from
> > Zend_Form?  I had a terrible time trying to get something looking
> > right with the groups/subforms being instead a dd, and was curious if
> > anyone really tried yet to make them look pretty :-d
> >
> > Regards,
> > Eric

[Amr Mostafa]

Hello,

I've found this article to be a great introduction into definition lists:

http://maxdesign.com.au/presentation/definition/

It lists a few possible definition list styles at the end, of which I've picked up this:

http://maxdesign.com.au/presentation/definition/dl-table-display.htm

And tweaked a bit (removed borders, font-family and unnecessary width constraints), and it looks fine as a simple start! CSS Below.

Happy styling :)
- Amr

dl.zend_form
{
    margin: 1em 0;
    padding: 0;
}

.zend_form dt
{
    width: 10em;
    float: left;
    margin: 0 0 0 0;
    padding: .5em;
    font-weight: bold;
}

/* commented backslash hack for mac-ie5 \*/
dt { clear: both; }
/* end hack */

.zend_form dd
{
    float: left;
    margin: 0 0 0 0;
    padding: .5em;
}

On Jan 22, 2008 10:14 PM, Mark Maynereid <mark@...> wrote:

I just want to chime in with this. Since the default changed to dt/dd,
unstyled forms look a bit weird now. Any CSS tips would be welcome.

On Tuesday 22 January 2008 19:52, Neil Garb wrote:

> I think that's one big problem with definition lists in this case: the
> dt/dd combo has no wrapping element so it's difficult to use
> 'clearfix' techniques to get IE6 (and I think other browsers, too) to
> render floating elements correctly.
>
> - Neil
>
> http://codecaine.co.za/blog/
>
> On Jan 22, 2008 9:47 PM, Eric Coleman < eric@...> wrote:
> > Does anyone have any sample css for styling the "new" output from
> > Zend_Form?  I had a terrible time trying to get something looking
> > right with the groups/subforms being instead a dd, and was curious if
> > anyone really tried yet to make them look pretty :-d
> >
> > Regards,
> > Eric