3.2.0

Label-less Grouping Trick

My application requires a LOT of form items on a 800x600 tab. I can't make it any bigger because our old employees that work at our front counter can't read anything if it is higher-resolution, so I have a huge lcd monitor with an 800x600 resolution for their convenience. Also i keep the entire tab in view.....

So how can I conserve space visually!?

Well, many of my groups are 'duh' groups.... for instance I don't have to label where the account information controls go because the account information form is very recognizable. SO, my group that holds all the account information controls has no label, thus giving me a vertical space of about 10-13 pixels that I can raise my controls in the group and not have them overlap the label of the group.

BUT what about the space!? If you don't have a label, then what about the blank space that's left in the line defining the group (aqua skin)

Easy. add the following CSS rule and it will hide any and all label-like structures for that group. Thus, you get the clean look and feel of groupings without any label taking up vertical space!

(example taken from my actual project... create the group and label to get an idea of the space-saving context)
...tabs etc......

#Group_Invoice_Details {left:  20px; top:  213px; width: 740px; height: 60px;}
#Group_Invoice_Details .aw-item-legend {  display: none; }
#Label_Invoice_Details_PO {left:  30px; top:  213px; font-size: 9px;}
#Input_Invoice_Details_PO {left:  30px; top:  246px; width: 100px;}
#Label_Invoice_Details_OrderedBy {left:  140px; top:  213px; font-size: 9px;}
#Input_Invoice_Details_OrderedBy {left:  140px; top:  246px; width: 100px;}

...other controls in the group here...


Note the #Group_Invoice_Details .aw-item-legend { display: none; }
John Mason
December 22,
Clarify:

If you create the Group, create and setControlText the Label's, and create the Inputs, then you'll have what I'm talking about with the space in the line of the group. To see what i mean about the extra space, use a setControlText on the Group so that the Group's 'label' isn't empty.... you'll see the label is overlapping the labels directly below it.... thus to have a label you'd have to move the Label_Invoice_Details_PO down.

With the display:none option, the grid's label is hidden, so that the entire of the Group's content can be moved up without a label overlaying it.
John Mason
December 22,

This topic is archived.

See also:


Back to support forum