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

Question

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 · Accepted Answer

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

cmorfin · Answer

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

Sign up

Please use your PTC eSupport account.

Welcome to the PTC Community

Please use your PTC eSupport account.

Scanning file for viruses.

This file cannot be downloaded