Can't set padding between SelectItems

[andrewbee]

Hi,

I am using SmartGWT 2.5, and GWT 2.2.

I can't get my form to put padding between SelectItems. My code is the following:

            DynamicForm optionsForm = new DynamicForm();
            optionsForm.setWidth100();
            optionsForm.setHeight100();
            optionsForm.setCellPadding(5);
            optionsForm.setAutoFocus(true);

            final SelectItem location = new SelectItem();
            location.setTitle(messages.location());

            final SelectItem fileType = new SelectItem();
            fileType.setTitle(messages.fileType());
            
            optionsForm.setFields(location, fileType);

I've tried setCellPadding() and setPadding(), and neither seems to have any effect. There is no vertical space between the SelectItems. The form is inside a VLayout.

Any help appreciated.

Thanks

[mathias]

Hi,

i'm a little bit at a loss regarding form formatting in general and this issue in particular. The examples in the showcase all show "simple" fields formatting, no dates, selectitems etc.

See attached screenshot, there's no padding for selectitems.


It would be great with some advice on how i can get the same alignment and padding for all the different types of form items. I can't see any methods to do anything in that respect with the items programmatically.

[Isomorphic]

That's not the normal appearance, you see to have done some damage already :)

See the Skinning Guide: like all other SmartGWT visual controls, each FormItem has a series of properties ending in "Style" which control different aspects of appearance.

[mathias]

Let me tell you straight away that what you're saying is impossible. I'm flawless. Ever was, always will be. ;)


seriously: thanks, you put me on the right track! The key was my own css that i apply on top of yours. If i commented out my css file, the field was aligned like the rest.

However, I also narrowed down the css code that caused the strange behaviour you could see in the image:

INPUT, td {
font-family: Verdana, Arial, Helvetica;
font-size: 12px;
color: #000000;
margin: 3px;
}

When take that out, the selectitem is aligned like all other fields...


I was hoping that someone could help me understand why this section caused *just* the selectitem to be formatted wrong as in my screenshot.

[Isomorphic]

First - definitely don't use CSS styles that apply box properties (border/margin/padding) to basic elements like TD or INPUT. That's going to mess up lots of layout calculations.

About why it happened - it's probably some weird interaction between cellPadding on the TD in the form vs the margin you're setting in the TD style. Different browsers treat the box properties on TDs differently.

[andrewbee]

I too figured out eventually that the problem was related to another CSS file setting borders to zero. D'oh!

[mathias]

Iso, thanks for your help.

Yeah, the CSS was something i had moved from an old project, thanks for the tip.

[levi]

First - definitely don't use CSS styles that apply box properties (border/margin/padding) to basic elements like TD or INPUT. That's going to mess up lots of layout calculations.

About why it happened - it's probably some weird interaction between cellPadding on the TD in the form vs the margin you're setting in the TD style. Different browsers treat the box properties on TDs differently.

Hi,

any hint on how to achieve spacing between adjacent cells?

|A<space>|<space>B<space>|<space>C<space>|<space>D| ?

or in worst case scenario this would also be OK
|A<space>|B<space>|C<space>|D<space>| ?

CellPadding on Form controls the HTML table cellpadding which sets the padding top, bottom, left and right. So that's not the best way to do it, right?
But how can I do it, without messing up the formitem width calculations?


thx,
levi

[Isomorphic]

You can use the cellStyle to specify arbitrary per-side padding.