CSS params to get rid of padding left & right?

[sklaffke]

Hi, the library works very well in my Angular app - thank you very much for this awesome library. However I have an issue with the styling. I would like to fill the nodes entirely with the corresponding background color of the specific node type. However I have a padding left and right for the inputs and outputs which are filled with white. As you can see in my screenshot the title-box is also not filled entirely. What param do I need to change in the css? Please find below the CSS which works with my Angular app: :root { --dfBackgroundColor: #ffffff; --dfBackgroundSize: 25px; --dfBackgroundImage: linear-gradient( to right, rgba(233, 233, 233, 1) 1px, transparent 1px ), linear-gradient(to bottom, rgba(233, 233, 233, 1) 1px, transparent 1px);

--dfNodeType: flex;
--dfNodeTypeFloat: none;
--dfNodeBackgroundColor: rgba(247, 247, 247, 1);
--dfNodeTextColor: #000000;
--dfNodeBorderSize: 1px;
--dfNodeBorderColor: rgba(202, 202, 202, 1);
--dfNodeBorderRadius: 2px;
--dfNodeMinHeight: 100px;
--dfNodeMinWidth: 300px;
--dfNodePaddingTop: 15px;
--dfNodePaddingBottom: 14px;
--dfNodeBoxShadowHL: 0px;
--dfNodeBoxShadowVL: 1px;
--dfNodeBoxShadowBR: 15px;
--dfNodeBoxShadowS: 1px;
--dfNodeBoxShadowColor: rgba(195, 195, 195, 1);

--dfNodeHoverBackgroundColor: rgba(247, 247, 247, 1);
--dfNodeHoverTextColor: rgba(0, 0, 0, 1);
--dfNodeHoverBorderSize: 1px;
--dfNodeHoverBorderColor: rgba(202, 202, 202, 1);
--dfNodeHoverBorderRadius: 3px;

--dfNodeHoverBoxShadowHL: 0px;
--dfNodeHoverBoxShadowVL: 1px;
--dfNodeHoverBoxShadowBR: 15px;
--dfNodeHoverBoxShadowS: 0px;
--dfNodeHoverBoxShadowColor: rgba(195, 195, 195, 1);

--dfNodeSelectedBackgroundColor: rgba(247, 247, 247, 1);
--dfNodeSelectedTextColor: rgba(34, 89, 140, 1);
--dfNodeSelectedBorderSize: 1px;
--dfNodeSelectedBorderColor: rgba(78, 169, 255, 1);
--dfNodeSelectedBorderRadius: 3px;

--dfNodeSelectedBoxShadowHL: 2px;
--dfNodeSelectedBoxShadowVL: 3px;
--dfNodeSelectedBoxShadowBR: 20px;
--dfNodeSelectedBoxShadowS: 0px;
--dfNodeSelectedBoxShadowColor: rgba(94, 177, 255, 1);

--dfInputBackgroundColor: rgba(255, 255, 255, 1);
--dfInputBorderSize: 1px;
--dfInputBorderColor: rgba(200, 200, 200, 1);
--dfInputBorderRadius: 50px;
--dfInputLeft: -15px;
--dfInputHeight: 15px;
--dfInputWidth: 15px;

--dfInputHoverBackgroundColor: rgba(78, 169, 255, 1);
--dfInputHoverBorderSize: 1px;
--dfInputHoverBorderColor: rgba(200, 200, 200, 1);
--dfInputHoverBorderRadius: 50px;

--dfOutputBackgroundColor: #ffffff;
--dfOutputBorderSize: 1px;
--dfOutputBorderColor: rgba(200, 200, 200, 1);
--dfOutputBorderRadius: 50px;
--dfOutputRight: -15px;
--dfOutputHeight: 15px;
--dfOutputWidth: 15px;

--dfOutputHoverBackgroundColor: rgba(78, 169, 255, 1);
--dfOutputHoverBorderSize: 1px;
--dfOutputHoverBorderColor: rgba(200, 200, 200, 1);
--dfOutputHoverBorderRadius: 50px;

--dfLineWidth: 5px;
--dfLineColor: rgba(78, 169, 255, 1);
--dfLineHoverColor: #4682b4;
--dfLineSelectedColor: rgba(67, 185, 147, 1);

--dfRerouteBorderWidth: 4px;
--dfRerouteBorderColor: rgba(78, 169, 255, 1);
--dfRerouteBackgroundColor: #ffffff;

--dfRerouteHoverBorderWidth: 8px;
--dfRerouteHoverBorderColor: rgba(67, 185, 147, 1);
--dfRerouteHoverBackgroundColor: #ffffff;

--dfDeleteDisplay: block;
--dfDeleteColor: rgba(78, 169, 255, 1);
--dfDeleteBackgroundColor: rgba(255, 255, 255, 1);
--dfDeleteBorderSize: 1px;
--dfDeleteBorderColor: rgba(78, 169, 255, 1);
--dfDeleteBorderRadius: 50px;
--dfDeleteTop: -15px;

--dfDeleteHoverColor: rgba(78, 169, 255, 1);
--dfDeleteHoverBackgroundColor: rgba(255, 255, 255, 1);
--dfDeleteHoverBorderSize: 1px;
--dfDeleteHoverBorderColor: rgba(78, 169, 255, 1);
--dfDeleteHoverBorderRadius: 50px;

}

/ Editing Drawflow / .parent-drawflow { display: flex; overflow: hidden; touch-action: none; outline:none; }

drawflow {

position: relative;
width: 100%;
height: 70vh;
background: var(--dfBackgroundColor);
background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
background-image: var(--dfBackgroundImage);
user-select: none;
perspective: 0;

}

.drawflow .parent-node { position: relative;

}

.drawflow .drawflow-node { align-items: center; text-align: start; position: absolute; z-index: 2; display: var(--dfNodeType); background: var(--dfNodeBackgroundColor); color: var(--dfNodeTextColor); border: var(--dfNodeBorderSize) solid var(--dfNodeBorderColor); border-radius: var(--dfNodeBorderRadius); min-height: var(--dfNodeMinHeight); width: auto; min-width: var(--dfNodeMinWidth); padding-top: var(--dfNodePaddingTop); padding-bottom: var(--dfNodePaddingBottom); -webkit-box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor); box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor); }

[jerosoler]

uhmm...

Try:

.drawflow-node {
background:red;  
}

[sklaffke]

Doesn't work - I use bootstrap 5 for the page, if I use as DisplayType "block" and for the inputs and outputs the following css: .drawflow .drawflow-node .input, .drawflow .drawflow-node .output {

position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
//margin-top: 50px;
cursor: crosshair;
z-index: 1;
margin-bottom: 5px;

}

the result looks quite ok, but I want to get the inputs and outputs in the middle

In addition, if use this approach my condition node which has two outputs is not displayed properly

[sklaffke]

Finally, I got it to run: I have changed the css for the inputs and outputs and added a second css for output_2. Now I am nearly happy with the result: The css looks like this: .drawflow .drawflow-node .input, .drawflow .drawflow-node .output {

position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
//top: 50px;
cursor: crosshair;
z-index: 1;
margin-bottom: 5px;

}

.drawflow .drawflow-node .input { left: -12px; top: 50%; background: var(--dfInputBackgroundColor); border: var(--dfInputBorderSize) solid var(--dfInputBorderColor); } .drawflow .drawflow-node .output { right: -10px; top: 50%; background: var(--dfOutputBackgroundColor); border: var(--dfOutputBorderSize) solid var(--dfOutputBorderColor); }

.drawflow .drawflow-node .output_2 { right: -10px; margin-top: 5px; top: 70%; background: var(--dfOutputBackgroundColor); border: var(--dfOutputBorderSize) solid var(--dfOutputBorderColor); }