About node shapes

[mcesaro]

Hi Jero, I'd like to include different node shapes in my flows. The ideal would be able to use a limited flow chart-like range (like circles or rhombus) but rectangular would be good, maybe using internally a row or grid layout. Can you please give us a quick rundown on the CSS hierarchy to use to achieve, if possible, this result?

Thank you, Massimo

[jerosoler]

Hi

View example of romb: https://github.com/jerosoler/Drawflow/issues/20#issuecomment-679976512

Jero

[mcesaro]

I see, actually I had something like this in mind: where the elements A and B and their input elements (text or select) are in the same row. I thought that changing the display: flex and flex-direction in the internal box class would be enough (I'm referring to the beautiful.css style;sheet in the demo), but they inherit from upper classes that makes the result quite messy. That's why I was wondering if there is a CSS way to customize the shape, at least in the content layout. Thank you for your support.

[jerosoler]

In the demo with beautiful.css

Modify in css

.drawflow-node .box {
display: flex;
}

And the result

You can also directly modify the source css, which is just this: https://github.com/jerosoler/Drawflow/blob/master/src/drawflow.css

[mcesaro]

Thank you!