How to change the form layout for instance to an address layout

Scriptcase 9 General
,
#1

Hello,

I’m trying to create a form for address information, like this:

Name (first name) (last name)
​Address (street) (nr) ( addition)
Postcode/Town (postcode) (town)

Normally scriptcase creates a form and puts every field below the previous one.
​So I tried to work with the layout. But it is a problem to get a correct alignement.

Is there a tutorial somewhere how to get this done?

Thanks in advance

#2

I am new to scriptcase, but I think you should try this. Create 2 layout blocks. The first one you set to 2 columns, the second to 3 columns.

You then put the (firstname) and (lastname) field under the first block, and the rest under the second block. This should resemble the layout you are looking for.

#3

When you create a form. SC creates a block for default, You can edit it and Change the alignment.

#4

Sorry, I would not recommend to make two blocks. There is standard a line between the two blocks. Also when there is a field in the first block and not a field in the second block you have to work with a dummy field. Is is better then to work with 2 colums in one block. But even then you have to work with dummy fields. It always shifts because some types needs more height and there you get crazy. In Scriptcase there is no standard solution for this. I always do all the original fields together in one field (a made field, not a database field) with a contentination of the two or more fields as a result. With a simple ajax you can pop-up a screen where you can fill in the details and close it again. Or you have to use the form grid solution. Hope you understand. Regards Bert.

#5

Perfect. I tried to avoid of going inside the .css. But this looks great.
I am going to give it a try also.
Regards Bert

#6

Hello there,
I think I give scottypaul 's solution a try, it seemes to do what I wanted.
Regards Jos

#7

If you need any help @josk give me a shout, if you want to split the name i.e first name last name then put these into a block on there own. set to 2 side by side, then play with the css as i suggested. works quite well TBH and looks good.