Shape widget borders seem to be truncated : How to solve ?

[herveDelhalle]

Hello everybody, 

When using the shape widget, the borders seem to be truncated (see example below). 

Is it possible to use css to modify this appearance ? 

Best regards 

Hervé  

[cmorfin]

Hi @herveDelhalle 

I managed to have the edges displayed in their entirety using some css indeed. However it is a bit cumbersome and may not work depending on how you place your widget.

However I provide it here in case that can help.

Once you view the mashup in runtime, select right mouse button > Inspect. Here you need to identify the size of the bounding box.
For this it will be easier to set the CustomClass attribute on the shape and search for it.
Once you have the size of the bounding box, you can set the rect item a little smaller, possibly moving also the x and y attribtue, as in

rect {
width: 180px !important;
height: 35px !important;
x: 2px !important;
y: 2px !important;
}

I have attached the sample mashup I used for that as it will probably easier to follow with that example.

Hope this helps

Christophe

[herveDelhalle]

Hi @cmorfin, 

I works perfectly for me. 

Thank you very much. 

Best regards 

Hervé 

[cmorfin]

Hi @herveDelhalle 

Great, I am pleased that it works for you.

If you can it would be helpful to mark the relevant reply as correct answer.

This will help others facing similar issue to find the solution more easily.

Thank you

Christophe

[herveDelhalle]

Hi @cmorfin, 

Your solution does not work if i try to use the dynamic filling property of shape widget. 

It seems that the custom css style overwrites the shape dimensions which come from dynamic filling ... 

Consequently, the whole shape is correctly colored and borders are visible but dynamic filling is no more available. 

Do you have a solution in such a case ? 

Best regards 

Hervé 

[cmorfin · Accepted solution]

Hi Hervé

Indeed the previous css would apply to all the rect in the page and so it does impact the dynamic filling, and it woudl also impact other shape in the same page.

To make it less impacting, you can try the following:

1) Enter a value for the CustomClass attribtue of the shape widget, for example cmoshape (can be anything)

2) modify the css to apply to  .cmoshape > .widget-shape-container > svg > rect  instead of only rect. For example:

.cmoshape > .widget-shape-container > svg > rect {
width: 180px !important;
height: 35px !important;
x: 2px !important;
y: 2px !important;

}

Hope this helps

Christophe

[herveDelhalle]

Hi @cmorfin , 

It works perfectly. 

Thank you for your help ! 

Hervé