React-diagrams: Diagrams not displaying

Created on 1 Feb 2019  路  1Comment  路  Source: projectstorm/react-diagrams

Using the examples provided the diagrams are not displayed (This issue was closed but the suggestion does not work on the latest version (https://github.com/projectstorm/react-diagrams/issues/169) and (https://github.com/projectstorm/react-diagrams/issues/144).

I assume there is an issue with the css file, so can this be updated to get a simple example running (using Create React App) without having to have to try to hack the css files?

Most helpful comment

When using the plain examples, you have to make sure that each parent html node is set to height 100%, otherwise the diagram will not be visible. This is due to the diagram component being set to position: relative by default.

Even the html element will have to be set to 100% height, as well as the body and so on.
Alternatively, you can overwrite the srd-diagram css class to change to position property to static.

Edit:
Even easier, just paste this into your html:

 <style>
            .srd-diagram {
                height: 100vh;
            }
</style>

Sorry, just saw that you already tried these fixes....

>All comments

When using the plain examples, you have to make sure that each parent html node is set to height 100%, otherwise the diagram will not be visible. This is due to the diagram component being set to position: relative by default.

Even the html element will have to be set to 100% height, as well as the body and so on.
Alternatively, you can overwrite the srd-diagram css class to change to position property to static.

Edit:
Even easier, just paste this into your html:

 <style>
            .srd-diagram {
                height: 100vh;
            }
</style>

Sorry, just saw that you already tried these fixes....

Was this page helpful?
0 / 5 - 0 ratings

Related issues

iddan picture iddan  路  3Comments

shortwavedave picture shortwavedave  路  3Comments

maxbasque picture maxbasque  路  3Comments

CarlousF picture CarlousF  路  3Comments

M2Costa picture M2Costa  路  3Comments