BPMN-JS/bmpn.io/coreUI/

Question

リソースに反応

サンプルレポ：https://github.com/aaronscribner/bmpn-coreui-react

CoreUI：私は設定する方法を見つけ出すように見えることはできません http://coreui.io/

問題コアUI管理テンプレートの内部を使用するときは、モデラーを正しい幅と高さに調整します。 Core UIテンプレートの中にこのBPMNエディタを埋め込むことを経験している人はいますか？

私もリアクションを学んでおり、私は今、壁に頭を打っているようです。

Answer 1

は、リンクが壊れたが、私は、彼らがbpmn.io examplesに使用されているようモデラーは、div要素内にラップされていることを、前提としています。

例からのコードに示すように、モデラは、通常、2つのdiv要素にラップされている：

<div class="content" id="js-drop-zone"> 

    <div class="message intro"> 
     <div class="note"> 
     Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started. 
     </div> 
    </div> 

    <div class="message error"> 
     <div class="note"> 
     <p>Ooops, we could not display the BPMN 2.0 diagram.</p> 

     <div class="details"> 
      <span>cause of the problem</span> 
      <pre></pre> 
     </div> 
     </div> 
    </div> 

    <div class="canvas" id="js-canvas"></div> 
    </div> 

上記のコードは、ドラッグであるjs-drop-zoneとして一つの要素を表示し、ドラッグすることができ、容器をドロップファイルをロードしてロードします。内部要素はレンダリングされるモデラーインスタンスの主なターゲットであるjs-canvasです。

あなたはこれらの要素の名前を知っているので、あなたは新しいCSSスタイルシートを作成し、追加を必要とせずに、その幅と高さを操作することができ、コードの反応：私はちょうどあなたをほのめかすために、2つの境界線を追加

#js-drop-zone { 
    width: 100%; 
    border: solid 1px F00; 
} 

#js-canvas { 
    width: 100%; 
    border: solid 1px 0F0; 
} 

をこれらの両方の要素の寸法であなたを助けることを願っています。

注：モデル作成者のコードもチェックしてください。パッケージの名前も同じですが、そのID名を見つける必要がない場合もあります。ブラウザで検査してください。