PDA

View Full Version : Distance between form items



gounis
23 Feb 2009, 6:04 AM
Hello,

I would like to ask how if possible to change the distance between the form items belonging to a form.

Thank you!

Condor
23 Feb 2009, 6:18 AM
Use CSS, e.g.

.x-form-item {margin-bottom: 8px;}

gounis
23 Feb 2009, 6:44 AM
Thanks for your fast response!

I added the
.x-form-item {margin-bottom: 8px;} in my css file and the
itemCls:'fieldset-items-test' in the Ext.form.FormPanel config options but it doesn't seem to work.

Is this approach right or I shall change the margin-bottom of the form item in the ext.css?

Condor
23 Feb 2009, 6:48 AM
If you include this:

.x-form-item {margin-bottom: 8px;}
after loading ext-all.css, it will override the default 4px for all fields.

If you want to change the spacing for a specific field you could use:

itemCls:'fieldset-items-test'
with:

.fieldset-items-test {margin-bottom: 8px;}

But, if you want to change the spacing of the fields INSIDE a fieldset with itemCls:'fieldset-items-test', then you would use:

.fieldset-items-test .x-form-item {margin-bottom: 8px;}

gounis
23 Feb 2009, 6:59 AM
Actually I must have confused you because accidentally I told you about the name of the css class that I use instead of the one in your example.

Anyway, I have a form with some form items. I want to change the distance between each form item inside the form. Your approach worked but only for textfields. In my case, I have a form with two BoxComponents and one FieldSet and I want to change the distance between them. But these components seem to be uneffected.

Condor
23 Feb 2009, 7:07 AM
For non-field components you have to change the styling yourself (use Firebug to locate the appropriate element/css rule).