My form can't be loaded on the entire page


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 :



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 ?

The best approach for you is using centered modal window with hiddeh header with form inited on the empty page.
modal window: … ality.html
hide header: … eader.html
attach form: … _form.html

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…

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.

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

Thanks for answers.

But maybe we didn’t understand each other :mrgreen:

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

I have attached 2 screenshots :

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 … creen.html - fullscreen init … anels.html - hide header … 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.

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.


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; }

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

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&eacute;p&ocirc;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"} ]}];

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

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

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 :

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) (435 KB)


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…)

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