Obtenir une mise en page bootstrap pour un formulaire à l'intérieur de la fenêtre dhtmlx

Question

J'ai une fenêtre dhtmlx qui contient un formulaire. Je voudrais obtenir un formulaire réactif avec des classes bootstrap. Mon problème en ce moment est que je ne peux pas sembler pouvoir ajouter mon propre formulaire dans la fenêtre, et je ne peux pas changer le className des champs (comme le champ de saisie).

J'ai essayé de changer le className, en créant le formulaire avec dhtmlx, mais il change simplement le className du conteneur. J'ai aussi besoin de changer le className de ses éléments, et le parent aussi, donc Bootstrap peut le comprendre.

Je voudrais ajouter des éléments HTML directement si cela est possible dans la fenêtre, en fait. Ce serait beaucoup plus simple que de modifier les champs générés par dhtmlx.

J'ai fait un petit jsFiddle pour montrer mon problème: http://jsfiddle.net/davidgourde/tnqfp6y8/1/

var myForm, formData; 
 
var dhxWins, w1; 
 
function doOnLoad() { 
 
    formData = [ 
 
    {type: "settings", position: "label-left", labelWidth: 100, inputWidth: 120}, 
 
    {type: "block", inputWidth: "auto", offsetTop: 12, list: [ 
 
     {type: "input", label: "Login", value: "p_rossi", className: "form-control"}, 
 
     {type: "password", label: "Password", value: "123"}, 
 
     {type: "checkbox", label: "Remember me", checked: true}, 
 
     {type: "button", value: "Proceed", offsetLeft: 70, offsetTop: 14} 
 
    ]} 
 
    ]; 
 
    dhxWins = new dhtmlXWindows(); 
 
    dhxWins.attachViewportTo("vp"); 
 
    w1 = dhxWins.createWindow("w1", 10, 10, 300, 250); 
 
    w1.denyResize(); 
 
    myForm = w1.attachForm(formData, true); 
 
} 
 
doOnLoad();

div#vp { 
 
    height: 600px; 
 
    border: 1px solid #dfdfdf; 
 
}

<link rel="stylesheet" href="https://2a6781b6e7331b7c52c1706cd28c7de3f641b52b.googledrive.com/host/0B4bedT44-LokVFBFUXlaVEthaFE?t=.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://ecropolis.s3.amazonaws.com/ui/libs/moment.min.js"></script> 
 
<script src="https://344bb70794e57c6753700eb885a1f4eb0c383612.googledrive.com/host/0B4bedT44-LokaV9tODJoX29BVFk"></script> 
 

 
<div id="vp"></div>

Merci beaucoup.

Answer 1

Enfin, j'ai inséré des éléments HTML directement. De cette façon, je peux créer la forme que je veux, exactement comme je le veux.

var myForm, formData; 
 
\t \t var dhxWins, w1; 
 
\t \t function doOnLoad() { 
 
\t \t \t dhxWins = new dhtmlXWindows(); 
 
\t \t \t dhxWins.attachViewportTo("vp"); 
 
\t \t \t w1 = dhxWins.createWindow("w1", 10, 10, 300, 250); 
 
\t \t \t myForm = w1.attachHTMLString(
 
     \t '<div class="container">' + 
 
     \t '<div class="form-group col-xs-12 col-sm-6">' + 
 
     \t \t '<label>label</label>' + 
 
      '<div>' + 
 
      \t '<input class="form-control" type="text">' + 
 
      '</div>' + 
 
      '</div>' + 
 
     '</div>' 
 
    ); 
 
\t \t } 
 
doOnLoad();

div#vp { 
 
\t \t \t height: 600px; 
 
\t \t \t border: 1px solid #dfdfdf; 
 
\t \t }

<link rel="stylesheet" href="https://2a6781b6e7331b7c52c1706cd28c7de3f641b52b.googledrive.com/host/0B4bedT44-LokVFBFUXlaVEthaFE?t=.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://ecropolis.s3.amazonaws.com/ui/libs/moment.min.js"></script> 
 
<script src="https://344bb70794e57c6753700eb885a1f4eb0c383612.googledrive.com/host/0B4bedT44-LokaV9tODJoX29BVFk"></script> 
 

 
<div id="vp"></div>