question about form field alignment


I’m trying to figure out the proper way to align fields on a form.

I have attached a screen shot of how I want them to lay out.

So far, this is the only code I can get to work, but it’s a kludge:

{type:“input”, name:“address”, label:“Address:”,maxLength:40, inputWidth:200},
{type:“input”, name:“city”, label:“City:”},

{type: “block”, list: [
{type:“input”, name:“state”, label:“State:”, labelWidth:55, maxLength:2, inputWidth:20},
{type: “newcolumn”},
{type:“input”, name:“zipcode”, label:“Zipcode:”,maxLength:5, inputWidth:50}

{type: “calendar”, dateFormat: “%Y-%m-%d”, serverDateFormat: “%Y-%m-%d”,name: “dob”, label: “Birthdate:”, offsetTop:30, maxLength:10, inputWidth:70}

Notice, I had to fiddle with the label width of the block of fields for the state and zipcode, because the BLOCK type has a left padding or offset of what looks to be 20 pixels, so I have to deduct that 20 from the normal label width of 75.

Is there a way to get blocks to have no padding in them? They don’t appear to have any top and bottom padding , but they do have a left and right padding, that again, looks like it’s 20 px.

Jimmying the labelWidth like that on an inner block makes maintenance of the code difficult, because if the developers ever change the padding on blocks, or if somebody wants to change the label width for the entire page, then this special short label will have to be adjusted by hand by the coder.

Any ideas?

John Pittman Hey

1 Like

Also, I have tried using the className option on the block, as in className: “noMargin” and then defining that style in the stylesheet as:

.noMargin {padding: 0; margin: 0}

But that had no effect at all.


works fine localy. download latest form from our site

Have you tried the attribute offsetLeft of the type: “block”?

{type: "block", offsetLeft: 20, list: [...]}

The code snippet that I included does work. But it’s not elegant or easy to maintain.

My question is: is there a way to change the margin/padding inside a block? I need to set it/them to 0 so I can get my forms to align properly.


Yes, it is possible. Here is your approach:
{type: “block”, offsetLeft: 20, className: “myClass”, list: […]}
.myClass { padding-left: 20px }

I know its kind a bit old
I tried the codes, but seems I could not get it work.
here is the screenshoot:

here is the codes I have:

		{type: "settings", labelWidth: 90, inputWidth: 200, position: "label-left"},
		{type: "input", name: "ftp_server", label: "Server", value: ""},
		{type: "block", width: 380, offsetTop: 0, offsetLeft: 0, className: "classBlock",
			{type: "input", name: "selitem", label: "Item", value: "select from button", inputWidth: 120},
			{type: "newcolumn"},
			{type: "button", name: "btn_1", value: "Select", offsetLeft: 0, offsetTop: 0}
		{type: "password", name: "ftp_pwd", label: "Password", value: "password"},
		{type: "select", name: "ftp_sync", label: "Sync every", options:[
			{value: "day", text: "day"},
			{value: "2ndday", text: "second day"},
			{value: "friday", text: "friday"},
			{value: "2ndfriday", text: "second friday", selected: true},
			{value: "Month", text: "last friday in a month"}
		{type: "checkbox", name: "ftp_log", value: 1, label: "Enable log", checked: true}

And we put additional line on style:
.classBlock { padding-left: 0px }

As shown, the “Item” align is not proper.
Please help on how I can make it nice


Add blockOffset: 0,
in type: “block”:

{type: "block", width: 380, offsetTop: 0, offsetLeft: 0, className: "classBlock", blockOffset: 0,
1 Like

Thanks Avalon,
It worked like a charm.