Can dhtmlx support autofit form

Suite and Optimus Suite 5
#1

I know dhtmlx support the create a new column with (type: “newcolumn”), but this is done manually.But I want a floating effect, if there is not enough space on the right, wrap to the next line, When modify the size of the window, the form can automatically adapt to the change.

thanks

#2

Do you mean some dynamic features?
Form can adjust itself to the necessary size, if your data will be more than containre, and scroll will appear.
Anyway, it can be something like this:

myFormStruct = [ {type:"input", name: 'inp1', label:'inp1', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp2', label:'inp2', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp3', label:'inp3', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp4', label:'inp4', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp5', label:'inp5', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp6', label:'inp6', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp7', label:'inp7', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp8', label:'inp8', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp9', label:'inp9', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp10', label:'inp10', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"} ]; myForm = new dhtmlXForm("form1", myFormStruct);
And it will like here:

Untitled_.jpg694×53 9.25 KB

#3

I want to auto Wrap effect if no enough space.
for example:

if one field with lable need 200px, and I add 12 field in a form.
If I resize form to 600px, then three fields will be put to form per line, all fields be put on 4 lines.
If I resize form to 800px, then four fields will be put to form per line, all fields be put on 3 lines.

horizontal scroll bar is not allowed to display, only vertical scroll bar is allowed to display.

#4

If you nest it in dhtmlx container component or in a div, you can wrap it as well.
I.e. the next structure:

dhxLayout = new dhtmlXLayoutObject("form1", "3J"); myForm = dhxLayout.cells("a").attachForm([ {type:"input", name: 'inp1', label:'inp1', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp2', label:'inp2', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp3', label:'inp3', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp4', label:'inp4', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp5', label:'inp5', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp6', label:'inp6', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp7', label:'inp7', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp8', label:'inp8', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp9', label:'inp9', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"}, {type:"input", name: 'inp10', label:'inp10', labelWidth: 30, inputWidth: 30}, {type: "newcolumn"} ]);
And it wuill rebuild with resize of its container:

#5

a new question:

I want to make effect below , can you tell me how to do? It is very important to me, thanks a lot.

for example,

input field a-n with fix width, label width:20, field width 80
input field z , label width:20,but field width spread to whole line.

when container set width to 300, form display like below:

input field a:_____________ input field b:_____________ input field c:_____________
input field d:_____________ input field e:_____________ input field f:_____________
input filed z:_________________________________________________________________
input field g:_____________ input field h:_____________ input field i:_____________
input field l:_____________ input field m:_____________ input field n:_____________

when container set width to 200, form display like below:

input field a:_____________ input field b:_____________
input field c:_____________ input field d:_____________
input field e:_____________ input field f:_____________
input filed z:________________________________________
input field g:_____________ input field h:_____________
input field i:_____________ input field l:_____________
input field m:_____________ input field n:_____________

horizontal scroll bar is not allowed to display, only vertical scroll bar is allowed to display.

#6

Try the approach like below:

[code]

Layout + Form html,body { height: 100%; margin: 0px; overflow: hidden; }
[/code] If you need some other sizing - just apply your custom
#7

Yes, it is what my want.
Thank you very very much, I can begin my jobs now .

#8

btw, I think you can add properties to implement same effect, it will become more easier.
for example:

{type:“input”, name: ‘inp6’, label:‘inp6’},
{type: “newcolumn”},
{type:“input”, name: ‘inp7’, label:‘inp7’, labelWidth: 200, wholeLine:true},
{type: “newcolumn”},