Obtention d'un formulaire d'amorçage réactif dans une fenêtre modale dhtmlx

Question

Un logiciel sur lequel je travaille comporte une fenêtre modale dhtmlx avec plusieurs onglets. Dans chacun de ces onglets, un formulaire généré est affiché (en fonction des données). Les formulaires sont faits de JavaScript, JQuery et certains contrôles dhtmlx.

J'essaie actuellement d'obtenir des formulaires réactifs en utilisant bootstrap (comme dhtmlx ne répond pas).

J'ai deux problèmes:

1. La fenêtre modale DHTMLX ne met pas à jour le contenu dynamique, il attend que le redimensionnement est fait pour rafraîchir le contenu. J'ai besoin que le contenu soit dynamiquement réorganisé par bootstrap pendant que je redimensionne la fenêtre modale.
2. Bootstrap col-*-* Le système de grille réagit à la taille de l'écran et non à la taille de la fenêtre modale. J'ai besoin de mon formulaire pour réagir à la taille de la fenêtre modale. Par exemple, si ma fenêtre modale est grande, j'ai besoin de plusieurs colonnes dans mon formulaire, mais si elle est petite, j'ai besoin d'une seule colonne. Dans this JSFiddle, l'intérieur de la fenêtre dhtmlx ne répond pas avec bootstrap.

Si cela est impossible ou non une bonne idée de garder la fenêtre modale DHTMLX (se il briser le responsive design je besoin?), Est-il possible de remplacer une fenêtre DHTMLX avec un modal bootstrap sans partir de zéro encore?

Answer 1

Je ne pouvais pas trouver un moyen de le faire d'une manière élégante, donc je l'ai fait à la dure. C'est la solution que j'utiliserai (et cela fonctionne).

J'ai écrit un exemple où j'ai changé les classes comme j'ai besoin de la façon dont j'utilise bootstrap dans ma forme, mais vous pouvez facilement l'adapter à vos propres besoins.

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(' '); 
     }); 
    }); 
}