Layout Single forms without tables

[Anil Patel-3]

Hi,
There has been some momentum  recently to add Ajax/Effects goodies to  
HTML rendered using Screen/Form widget. I think as a part of this  
effort we should consider moving away from FORM Layout using html  
tables. The form layout using flexible html structures like div and  
CSS can be made look COOL easily.

Is this doable?

Anybody interested in giving implementation tips?

Regards
Anil Patel

[David E Jones]

I did some work on this years ago doing a "prototype" of sorts in the  
newcustomer.ftl page. This is for single type forms only, as for list  
and multi forms a CSS layout doesn't make sense (given the tabular  
nature of that layout).

The important CSS classes are form-row, form-label, and form-field.

I don't know if this is the most elegant way to do it, but it seems to  
work pretty well and has been there for years. I believe the styles  
are only in the ecommain.css file at the minute.

-David


On May 31, 2008, at 1:38 PM, Anil Patel wrote:

> Hi,
> There has been some momentum  recently to add Ajax/Effects goodies  
> to HTML rendered using Screen/Form widget. I think as a part of this  
> effort we should consider moving away from FORM Layout using html  
> tables. The form layout using flexible html structures like div and  
> CSS can be made look COOL easily.
>
> Is this doable?
>
> Anybody interested in giving implementation tips?
>
> Regards
> Anil Patel
>
>
>

[Adrian Crum-2]

I remember CSS classes like col-row, col-left, col-right, etc. Basically <tr> and <td> elements were replaced with <div class="col-row"> and <div class="col-left"> - which made no sense at all. It was a lot of markup to do nothing more than create a table.

Table layout is NOT evil - it is ideal for laying out columns and rows (like forms).

CSS can be used to make tables look cool too. I'd rather see Ajax efforts put into "smart" table headers that, when clicked, change the sort order of the table.

-Adrian

David E Jones <[hidden email]> wrote:
I did some work on this years ago doing a "prototype" of sorts in the  
newcustomer.ftl page. This is for single type forms only, as for list  
and multi forms a CSS layout doesn't make sense (given the tabular  
nature of that layout).

The important CSS classes are form-row, form-label, and form-field.

I don't know if this is the most elegant way to do it, but it seems to  
work pretty well and has been there for years. I believe the styles  
are only in the ecommain.css file at the minute.

-David


On May 31, 2008, at 1:38 PM, Anil Patel wrote:

> Hi,
> There has been some momentum  recently to add Ajax/Effects goodies  
> to HTML rendered using Screen/Form widget. I think as a part of this  
> effort we should consider moving away from FORM Layout using html  
> tables. The form layout using flexible html structures like div and  
> CSS can be made look COOL easily.
>
> Is this doable?
>
> Anybody interested in giving implementation tips?
>
> Regards
> Anil Patel
>
>
>

       

[David E Jones]

I still like the idea because these aren't really a "table" per-se, ie  
no natural columns and rows, just title and field sets. Some might  
want the title above the field instead of to its left. Others might  
want it below or to the right (because they are crazy I guess... ;) ).  
Some might want a simulation of 2 columns like I did on the  
newcustomer.ftl page, and others might want the field and title to be  
right next to eachother.

The point is if we do it with CSS then people can choose and lay them  
out however they want, without changing the HTML that is produced.

-David


On May 31, 2008, at 5:03 PM, Adrian Crum wrote:

> I remember CSS classes like col-row, col-left, col-right, etc.  
> Basically <tr> and <td> elements were replaced with <div class="col-
> row"> and <div class="col-left"> - which made no sense at all. It  
> was a lot of markup to do nothing more than create a table.
>
> Table layout is NOT evil - it is ideal for laying out columns and  
> rows (like forms).
>
> CSS can be used to make tables look cool too. I'd rather see Ajax  
> efforts put into "smart" table headers that, when clicked, change  
> the sort order of the table.
>
> -Adrian
>
> David E Jones <[hidden email]> wrote:
> I did some work on this years ago doing a "prototype" of sorts in the
> newcustomer.ftl page. This is for single type forms only, as for list
> and multi forms a CSS layout doesn't make sense (given the tabular
> nature of that layout).
>
> The important CSS classes are form-row, form-label, and form-field.
>
> I don't know if this is the most elegant way to do it, but it seems to
> work pretty well and has been there for years. I believe the styles
> are only in the ecommain.css file at the minute.
>
> -David
>
>
> On May 31, 2008, at 1:38 PM, Anil Patel wrote:
>
>> Hi,
>> There has been some momentum  recently to add Ajax/Effects goodies
>> to HTML rendered using Screen/Form widget. I think as a part of this
>> effort we should consider moving away from FORM Layout using html
>> tables. The form layout using flexible html structures like div and
>> CSS can be made look COOL easily.
>>
>> Is this doable?
>>
>> Anybody interested in giving implementation tips?
>>
>> Regards
>> Anil Patel
>>
>>
>>
>
>
>

[Anil Patel-3]

David,
Thanks for adding details. For more complex data entry forms like  
customer, I like to use ftl because we can do Two column layout and  
have Web Designer make it look the way customer may like most.

Let's say if Shipping and Billing address are shown side by side and I  
want to hide Billing address if its same as shipping then it will be  
easy (I think only possible) if layout was done using div's.

Regards
Anil Patel

On Jun 1, 2008, at 12:15 AM, David E Jones wrote:

>
> I still like the idea because these aren't really a "table" per-se,  
> ie no natural columns and rows, just title and field sets. Some  
> might want the title above the field instead of to its left. Others  
> might want it below or to the right (because they are crazy I  
> guess... ;) ). Some might want a simulation of 2 columns like I did  
> on the newcustomer.ftl page, and others might want the field and  
> title to be right next to eachother.
>
> The point is if we do it with CSS then people can choose and lay  
> them out however they want, without changing the HTML that is  
> produced.
>
> -David
>
>
> On May 31, 2008, at 5:03 PM, Adrian Crum wrote:
>
>> I remember CSS classes like col-row, col-left, col-right, etc.  
>> Basically <tr> and <td> elements were replaced with <div class="col-
>> row"> and <div class="col-left"> - which made no sense at all. It  
>> was a lot of markup to do nothing more than create a table.
>>
>> Table layout is NOT evil - it is ideal for laying out columns and  
>> rows (like forms).
>>
>> CSS can be used to make tables look cool too. I'd rather see Ajax  
>> efforts put into "smart" table headers that, when clicked, change  
>> the sort order of the table.
>>
>> -Adrian
>>
>> David E Jones <[hidden email]> wrote:
>> I did some work on this years ago doing a "prototype" of sorts in the
>> newcustomer.ftl page. This is for single type forms only, as for list
>> and multi forms a CSS layout doesn't make sense (given the tabular
>> nature of that layout).
>>
>> The important CSS classes are form-row, form-label, and form-field.
>>
>> I don't know if this is the most elegant way to do it, but it seems  
>> to
>> work pretty well and has been there for years. I believe the styles
>> are only in the ecommain.css file at the minute.
>>
>> -David
>>
>>
>> On May 31, 2008, at 1:38 PM, Anil Patel wrote:
>>
>>> Hi,
>>> There has been some momentum  recently to add Ajax/Effects goodies
>>> to HTML rendered using Screen/Form widget. I think as a part of this
>>> effort we should consider moving away from FORM Layout using html
>>> tables. The form layout using flexible html structures like div and
>>> CSS can be made look COOL easily.
>>>
>>> Is this doable?
>>>
>>> Anybody interested in giving implementation tips?
>>>
>>> Regards
>>> Anil Patel
>>>
>>>
>>>
>>
>>
>>
>

[Adrian Crum-2]

Having the form layout change like you suggested would be a cool feature. Couldn't we have a widget attribute that controls that, and still output a table? Something like field-label-orientation="top | bottom | reversed".

-Adrian

David E Jones <[hidden email]> wrote:
I still like the idea because these aren't really a "table" per-se, ie  
no natural columns and rows, just title and field sets. Some might  
want the title above the field instead of to its left. Others might  
want it below or to the right (because they are crazy I guess... ;) ).  
Some might want a simulation of 2 columns like I did on the  
newcustomer.ftl page, and others might want the field and title to be  
right next to eachother.

The point is if we do it with CSS then people can choose and lay them  
out however they want, without changing the HTML that is produced.

-David


On May 31, 2008, at 5:03 PM, Adrian Crum wrote:

> I remember CSS classes like col-row, col-left, col-right, etc.  
> Basically  and  elements were replaced with  and  - which made no sense at all. It  
> was a lot of markup to do nothing more than create a table.
>
> Table layout is NOT evil - it is ideal for laying out columns and  
> rows (like forms).
>
> CSS can be used to make tables look cool too. I'd rather see Ajax  
> efforts put into "smart" table headers that, when clicked, change  
> the sort order of the table.
>
> -Adrian
>
> David E Jones  wrote:
> I did some work on this years ago doing a "prototype" of sorts in the
> newcustomer.ftl page. This is for single type forms only, as for list
> and multi forms a CSS layout doesn't make sense (given the tabular
> nature of that layout).
>
> The important CSS classes are form-row, form-label, and form-field.
>
> I don't know if this is the most elegant way to do it, but it seems to
> work pretty well and has been there for years. I believe the styles
> are only in the ecommain.css file at the minute.
>
> -David
>
>
> On May 31, 2008, at 1:38 PM, Anil Patel wrote:
>
>> Hi,
>> There has been some momentum  recently to add Ajax/Effects goodies
>> to HTML rendered using Screen/Form widget. I think as a part of this
>> effort we should consider moving away from FORM Layout using html
>> tables. The form layout using flexible html structures like div and
>> CSS can be made look COOL easily.
>>
>> Is this doable?
>>
>> Anybody interested in giving implementation tips?
>>
>> Regards
>> Anil Patel
>>
>>
>>
>
>
>

       

[Jacopo Cappellato-3]

I think that the main goal of (html) tables is to render tabular data;  
for this reason using them to render a list is fine, but we should  
avoid (if possible) to use them to render forms of type "single".

Jacopo

On Jun 1, 2008, at 2:57 PM, Adrian Crum wrote:

> Having the form layout change like you suggested would be a cool  
> feature. Couldn't we have a widget attribute that controls that, and  
> still output a table? Something like field-label-orientation="top |  
> bottom | reversed".
>
> -Adrian
>
> David E Jones <[hidden email]> wrote:
> I still like the idea because these aren't really a "table" per-se, ie
> no natural columns and rows, just title and field sets. Some might
> want the title above the field instead of to its left. Others might
> want it below or to the right (because they are crazy I guess... ;) ).
> Some might want a simulation of 2 columns like I did on the
> newcustomer.ftl page, and others might want the field and title to be
> right next to eachother.
>
> The point is if we do it with CSS then people can choose and lay them
> out however they want, without changing the HTML that is produced.
>
> -David
>
>
> On May 31, 2008, at 5:03 PM, Adrian Crum wrote:
>
>> I remember CSS classes like col-row, col-left, col-right, etc.
>> Basically  and  elements were replaced with  and  - which made no  
>> sense at all. It
>> was a lot of markup to do nothing more than create a table.
>>
>> Table layout is NOT evil - it is ideal for laying out columns and
>> rows (like forms).
>>
>> CSS can be used to make tables look cool too. I'd rather see Ajax
>> efforts put into "smart" table headers that, when clicked, change
>> the sort order of the table.
>>
>> -Adrian
>>
>> David E Jones  wrote:
>> I did some work on this years ago doing a "prototype" of sorts in the
>> newcustomer.ftl page. This is for single type forms only, as for list
>> and multi forms a CSS layout doesn't make sense (given the tabular
>> nature of that layout).
>>
>> The important CSS classes are form-row, form-label, and form-field.
>>
>> I don't know if this is the most elegant way to do it, but it seems  
>> to
>> work pretty well and has been there for years. I believe the styles
>> are only in the ecommain.css file at the minute.
>>
>> -David
>>
>>
>> On May 31, 2008, at 1:38 PM, Anil Patel wrote:
>>
>>> Hi,
>>> There has been some momentum  recently to add Ajax/Effects goodies
>>> to HTML rendered using Screen/Form widget. I think as a part of this
>>> effort we should consider moving away from FORM Layout using html
>>> tables. The form layout using flexible html structures like div and
>>> CSS can be made look COOL easily.
>>>
>>> Is this doable?
>>>
>>> Anybody interested in giving implementation tips?
>>>
>>> Regards
>>> Anil Patel
>>>
>>>
>>>
>>
>>
>>
>
>
>
>
>