Bootstrap 4 / vanillajs demo example not appearing

Sispheor commented 3 years ago

Hi,

I'm trying to just evaluate the lib. And the demo example is not appearing in the page.

I'm using bootstrap 4 (with AdminLTE template) but I tried as well in an empty page. The dom is ok but it's like the CSS is not applied.

Here is a sample code I tried (no boostrap here)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
</head>
<body>
    <div id="drawflow"></div>
    <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
    <script>
        console.log("Drawflow start")
        var id = document.getElementById("drawflow");
        const editor = new Drawflow(id);
        editor.start();
        var html = `
        <div><input type="text" df-name></div>
        `;
        var data = { "name": '' };
        editor.addNode('github', 0, 1, 150, 300, 'github', data, html);
        console.log("Drawflow end")
    </script>
</body>
</html>

Did I miss something? Thanks for your support. And thanks for the job done on this lib. (Even if I'm not able to use it XD)

jerosoler commented 3 years ago

Hello @Sispheor

with a naked eye add style

<style>
  #drawflow {
    position: relative;
    width: 90vw;
    height: 800px;
    border: 1px solid red;
  }
  </style>

Or view example:

https://github.com/jerosoler/Drawflow/issues/187#issuecomment-862554533

Jero

Sispheor commented 3 years ago

Ok, it works only if I place the style at the end of my html. Not in the header.

<div class="content-wrapper">
        <div class="content">
            <div class="container-fluid">
                <div id="drawflow"></div>
            </div>
        </div>
    </div>
    <style>
        #drawflow {
            position: relative;
            width: 90vw;
            height: 800px;
            background: var(--background-color);
            background-size: 25px 25px;
            background-image:
            linear-gradient(to right, #f1f1f1 1px, transparent 1px),
            linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
        }

    </style>

Thanks for your help !

jerosoler / Drawflow

Bootstrap 4 / vanillajs demo example not appearing #194