Community Tip - If community subscription notifications are filling up your inbox you can set up a daily digest and get all your notifications in a single email. X
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é
Solved! Go to 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
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
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
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é
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