Creating form builder with two/three column layout

[manubenjamin]

I need to create form builder with two or three column layout (Drag and drop component to column and reposition it within the columns). I have tried the same by adding different fb-builder in each column. But for me, I am not able to drag and drop the component from one column to other.

Can you help me to fix the issue.

[hueitan]

Are you able to dnd on the demo page?

[manubenjamin]

Yes, but I am not dragging and dropping component from fb-component. For me there is some dynamic list and based on the input, I am creating the component and adding to fb-builder. After adding to fb-builder, I am able to drag and reposition the component inside the fb-builder. But moving component from one fb-builder to other is not working(Drop event of all fb-builder is triggering while dropping)

[kimthuy]

I recommend to create multiple fb-builder

[santosh-k1]

Hi, You need to edit in angular-form-builder.js steps are as below -

• i have added col-md-3 which will help me to create 4 columns template: "<div class='form-horizontal'>\n <div class='fb-form-object-editable col-md-3' ng-repeat=\"object in formObjects\"\n fb-form-object-editable=\"object\"></div>\n</div>",
• Blank area where you have drag by default it shows 100 % but you need to use col-md-3 so that it shows same area where you want to place the controls $empty = $("<div class='fb-form-object-editable empty col-md-3'></div>"); I hope it will help you to fix the column issue.

[Hirenp75]

Hi santosh-k1,

i have added col-md-3 for create the 4 columns and col-md-4 for create the 3 columns

my template : "<div class="form-horizontal">\n <div class="row"> <div class="fb-form-object-editable col-md-3" ng-repeat="object in formObjects" fb-form-object-editable="object"> \n \n "

but still drag and drop functionality isn't working for me.so can you help for me solved 4 column and column related issue.

If you have any other solution please let me know.it's great for me.

Thanks