Erhalten eines responsiven Bootstrap-Formulars in einem modalen Fenster mit DXML-Code

Question

Eine Software, an der ich gerade arbeite, verfügt über ein modales Fenster mit mehreren Registerkarten. Auf jeder Registerkarte wird ein generiertes Formular angezeigt (basierend auf Daten). Die Formulare bestehen aus JavaScript-, JQuery- und einigen dhtmlx-Steuerelementen.

Ich versuche derzeit, reagierende Formulare mit Bootstrap zu erhalten (da dhtmlx nicht reagiert).

Ich habe zwei Probleme:

1. Das Dhtmlx modale Fenster aktualisieren nicht die Inhalte dynamisch, es wartet, bis die Größe ändern getan wird, um den Inhalt zu aktualisieren. Ich brauche den Inhalt, der durch Bootstrap dynamisch reorganisiert wird, während ich das modale Fenster verändere.
2. Bootstrap col-*-* Grid-System reagieren auf die Bildschirmgröße, nicht die modale Fenstergröße. Ich brauche mein Formular, um auf die modale Fenstergröße zu reagieren. Als Beispiel, wenn mein modales Fenster groß ist, brauche ich mehrere Spalten in meinem Formular, aber wenn es klein ist, brauche ich nur eine Spalte. In this JSFiddle reagiert das Innere des DHTMLX-Fensters nicht mit Bootstrap.

Wenn das nicht möglich ist oder nicht, eine gute Idee, die Dhtmlx modalen Fenster zu halten (es wird das Responsive Design zu brechen ich brauche?), Ist es möglich, ein Dhtmlx Fenster mit einem Bootstrap-modal zu ersetzen, ohne von Grund auf neu nochmal?

Answer 1

Ich konnte keinen Weg, dies zu tun in einer eleganten Art und Weise finden, also tat ich es auf die harte Tour. Dies ist die Lösung, die ich verwenden werde (und das funktioniert).

Ich schrieb ein Beispiel, wo ich die Klassen ändern möchte, wie ich Bootstrap in meinem Formular benutze, aber Sie können es leicht an Ihre eigenen Bedürfnisse anpassen.

window.attachEvent("onResizeFinish", function(obj){ 
    deleteClassCol(); 
    if (obj.getDimension()[0] < 768) 
    { 
     $('.form-group').addClass('col-xs-12'); 
     $('.label-control').addClass('col-xs-12'); 
     $('.theInput').addClass('col-xs-12'); 
    } 
    else if (obj.getDimension()[0] < 992) 
    { 
     $('.form-group').addClass('col-xs-6'); 
     $('.label-control').addClass('col-xs-2'); 
     $('.theInput').addClass('col-xs-10'); 
    } 
    else if (obj.getDimension()[0] < 1200) 
    { 
     $('.form-group').addClass('col-xs-4'); 
     $('.label-control').addClass('col-xs-2'); 
     $('.theInput').addClass('col-xs-10'); 
    } 
    else 
    { 
     $('.form-group').addClass('col-xs-3'); 
     $('.label-control').addClass('col-xs-2'); 
     $('.theInput').addClass('col-xs-10'); 
    } 
}); 

function deleteClassCol(){ 
    [".form-group", ".label-control", ".theInput"].forEach(function(theClass) { 
    $(theClass).removeClass (function (index, css) { 
     return (css.match (/(^|\s)col-\S+/g) || []).join(' '); 
     }); 
    }); 
}