My form can't be loaded on the entire page

Fahd · July 15, 2014, 2:31pm

Hello,

i have some trouble to load my form on the entire page.
Even if i write in my form’s class or my fieldset’s class that i want them to take all the space on the page, it doesn’t works.

In Firebug, i have this code html :

[code][…]

[...][/code]

And if i remove the first line with the dhxform_base, i have the result that i want.

I don’t know where it comes from and how to manage this problem.

Any ideas ?

Darya · July 15, 2014, 3:05pm

Hello!
The best approach for you is using centered modal window with hiddeh header with form inited on the empty page.
modal window: dhtmlx.com/docs/products/dhtmlxW … ality.html
hide header: dhtmlx.com/docs/products/dhtmlxW … eader.html
attach form: dhtmlx.com/docs/products/dhtmlxW … _form.html

Fahd · July 16, 2014, 6:16am

Thanks Darya

But there is not another solution ? Because i don’t use dhtmlxwindows and i find this way a little bit complicated just for display the form on the entire page…

Darya · July 16, 2014, 9:53am

It is not complicated at all, but you can use simple centered modal div (instead dhxwindow) to attach form. But i recommend dhx, because it has ready methods to center, to make modal… other useful settings.

Darya · July 16, 2014, 9:54am

We don’t recommend you to modify form base css - it will not work as you expecting

Fahd · July 16, 2014, 2:18pm

Thanks for answers.

But maybe we didn’t understand each other

I want that my form take 100% of my page’s width.

I have attached 2 screenshots :

Result.png is a screen of what i have

Result.png1384×674 31.8 KB
Wanted.png is a screen of what i want ( i have it when i delete the first div class dhxform_base in my form_container’s div, the length of my fieldset is good )

Wanted.png1376×628 30.9 KB

Darya · July 16, 2014, 3:01pm

In this case you need a div 100% width/height and attach forth there.
But we recommend you to use 1C fullscreen layout with hidden header to place your form
dhtmlx.com/docs/products/dhtmlxL … creen.html - fullscreen init
dhtmlx.com/docs/products/dhtmlxL … anels.html - hide header
dhtmlx.com/docs/products/dhtmlxL … mponents/1 - attach form

If you use it this way - you will have ready browser-window-resize approach with dhx layout, also your form will take the whole screen area.

Fahd · July 22, 2014, 11:53am

Thanks for the answer.
I have tried dhtmlxlayout and it works. My form takes all the width of my page but my radio buttons have disapeared and the {type:“newcolumn”} doesn’t works in my form.

Should I do something to fix this problem ? Because the layout created them.

[code]

Test Formulaire

<link rel="stylesheet" type="text/css" href="dhtmlxForm/dhtmlxForm/codebase/skins/dhtmlxform_dhx_terrace.css">

<script src="dhtmlxGrid/dhtmlxDataProcessor/codebase/dhtmlxdataprocessor.js"></script>
<script src="dhtmlxForm/dhtmlxForm/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxForm/dhtmlxForm/codebase/dhtmlxform.js"></script>
<script src="dhtmlxForm/dhtmlxForm/codebase/dhtmlx.js"></script>
<script src="dhtmlxForm/dhtmlxForm/codebase/ext/dhtmlxform_item_calendar.js"></script>
<script src="dhtmlxGrid/dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
<link rel="stylesheet" type="text/css" href="dhtmlxGrid/dhtmlxCalendar/codebase/dhtmlxcalendar.css">
<link rel="stylesheet" type="text/css" href="dhtmlxGrid/dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_terrace.css">

html,body { width: 100%; height: 100%; margin-top: 10px; }

[/code]

Darya · July 22, 2014, 12:14pm

We need your form structure to test checkboxes and new column type. Please, povide some static code sample

Fahd · July 22, 2014, 12:51pm

formData = [ {type: "fieldset", name:"form", label:"Recherche d'article", list:[ {type: "input", name: 'Article', label: 'Article:', position: 'label-top',disabled:'', value:''}, {type: "input", name: 'Stock', label: 'Stock reel:', position: 'label-top', width : 100}, {type: "input", name: 'Nom_Article', label: 'Nom article :', position: 'label-top'}, {type: "input", name: 'Quantite', label: 'Quantite:', position: 'label-top', width : 80, required :'true'}, {type: "input", name: 'Dossier', label: 'N. Dossier:', position: 'label-top', width : 100}, {type: "input", name: 'Ref', label: 'Reference:', position: 'label-top', width : 150}, {type: "label", name: 'Sous-titre', label: 'Valorisation :',position: 'label-top'}, {type: "input", name: 'Devise', label: 'Valeur devise:', position: 'label-top', width : 80}, {type: "input", name: 'Change', label: 'Taux de change:', position: 'label-top', width : 80}, {type:"newcolumn"}, {type: "label", name: 'Nom Article', label: 'PRESSE',position: 'label-top'}, {type:"newcolumn"}, {type: "input", name: 'Depot', label: 'Dépôt:', position: 'label-top', width : 80}, {type: "input", name: 'Conditionnement', label: 'Conditionnement:', position: 'label-top', width : 100}, {type: "label", name: 'Facteur de conversion', label: 'Facteur conversion',position: 'label-top', list :[ {type: "radio", name: "Conversion", value: "conversionY", label: "Oui", checked: false}, {type:"newcolumn"}, {type: "radio", name: "Conversion", value: "conversionN", label: "Non", checked: false}]}, {type: "label", name: 'Cumul', label: 'Cumul (O/N)',position: 'label-top', list :[ {type: "radio", name: "Cumul", value: "cumulY", label: "Oui", checked: false}, {type:"newcolumn"}, {type: "radio", name: "Cumul", value: "cumulN", label: "Non", checked: true}]}, {type: "input", name: 'Facture', label: 'N.Facture:', position: 'label-top', width : 100}, {type: "select", name: "Devise", label: "Code devise:", options:[ {value: "1", text: "EUR"}, {value: "2", text: "CHF"}, {value: "3", text: "GBP"}]}, {type:"newcolumn"}, {type: "label", name: 'Nom Depot', label: 'Depot',position: 'label-top'}, {type: "input", name: 'Facteur Conver', label: 'Facteur de conversion:', position: 'label-top', width : 100}, {type:"button", name:"OK", width:150, value:"Valider"}, {type:"button", name:"Cancel", width:150, value:"Retour"} ]}];

Darya · July 22, 2014, 1:55pm

You need to use item type “block” to collect all items you need in one “square area”
You need to use correct library declaration:
dhtmlx.com/docs/products/dhtmlxL … _form.html
Here is a layout + form sample - please, use correct page start
Choose one of loading way and don’t try to use both (json + xml loading) one by one
Attach form to layout cell bia method
layout.cells(“a”).attachForm(formStructure)

I can make a sample for you, but i need graphic location of items in the form. Could you provide me these items arrangement?

Fahd · July 22, 2014, 2:18pm

Thank you very much for your help.

You can make any example but if you want absolutely a screen of graphic locations, here is a screenshot :

Darya · July 22, 2014, 2:35pm

Not so clear, but OK. Let’s try this (attachment), then we will correct something if it is nessesary (or you can do it your selt, if catch the point)
2014.07.22.zip (435 KB)

Fahd · July 22, 2014, 2:54pm

Thanks.

I just modify the layout’s pattern into “1C”. But how can I use “%” instead of px ? Because it doesn’t take all the place in the layout ( we have several sizes of screen…)

Darya · July 23, 2014, 9:20am

You can just get cell width via method getWidth() and count manually % in px. DHX components need px to set sizes.