dhtmlxモーダルウィンドウ内でレスポンスブートストラップフォームを取得

Question

私が取り組むソフトウェアは、複数のタブを持つdhtmlxモーダルウィンドウを持っています。これらの各タブには、生成されたフォームが（データに基づいて）表示されます。フォームは、JavaScript、JQuery、およびいくつかのdhtmlxコントロールで構成されています。

私は現在、ブートストラップを使用してレスポンシブフォームを取得しようとしています（dhtmlxは応答しません）。

私は2つの問題を抱えて：サイズ変更がコンテンツをリフレッシュするために行われるまで

1. dhtmlxモーダルウィンドウがコンテンツを動的に更新しませんが、それが待ちます。モーダルウィンドウのサイズを変更するときに、コンテンツをブートストラップによって動的に再構成する必要があります。
2. ブートストラップcol-*-*グリッドシステムはモーダルウィンドウサイズではなく画面サイズに反応します。モーダルウィンドウサイズに反応するために私のフォームが必要です。たとえば、私のモーダルウィンドウが大きい場合は、フォームに複数の列が必要ですが、小さければ1つの列しか必要ありません。 this JSFiddleでは、dhtmlxウィンドウの内側はブートストラップに反応しません。

ことがdhtmlxモーダルウィンドウを（それは私が必要とする応答性のデザインを破るだろう？）維持するためには良いアイデア可能かどうかではない場合、それはゼロから開始することなく、ブートストラップモーダルでdhtmlxウィンドウを交換することが可能です再び？

Answer 1

私は、エレガントな方法でこれを行うための方法を見つけることができませんでしたので、私はハードな方法それをやりました。これは私が使用する解決策です（それはうまくいきます）。

私は自分のフォームにブートストラップをどのように使用するかについて、私が必要とするクラスを変更した例を書いていますが、これを自分のニーズに簡単に適応させることができます。

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