Value Display widget on text wrapping appears distorted

[priyag17]

With text wrapping in Value Display widget the textbox appears distorted. This is due to style of box-shadow as

[part~=disclosure-button-overlay] {

1. box-shadow: 0px -8px 16px;

}

on id disclosurebuttonoverlay.

This is part of below style :

<style ctx="PTCS-VALUE-DISPLAY">:host {
border-color: rgb(255, 255, 255);
border-width: 1px;
border-style: none;
--valuedisplay-modal-shadowcolor: #232b2d;
--value-display-modal-popup-padding: 24px;
--value-display-modal-popup-value-padding-top: 8px;
--value-display-button-hit-area-side: 34px;
--value-display-popup-close-button-container: 16px;
--value-display-popup-close-button-container-padding: 16px;
--value-display-modal-popup-padding-top: 42px;
--value-display-live-art-area-image-popup-padding: 42px;
--value-display-live-art-area-image-popup-margin-top: 66px;
--value-display-key-min-height: 26px;
--value-display-value-min-height: 26px;
--value-display-key-label-header-font-size: 26px;
--value-display-key-label-sub-header-font-size: 20px;
--value-display-key-label-body-fontsize: 14px;
--value-display-key-label-label-font-weight: 600;
--value-display-key-label-label-font-size: 14px;
--value-display-label-popup-color: #232b2d;
--value-display-popup-close-button-margin: 8px;
}
[part~=disclosure-button-overlay] {
box-shadow: 0px -8px 16px;
}
[part~=show-button] {
box-shadow: 0px -8px 16px;
font-family: Arial, sans-serif;
font-weight: bold;
font-style: normal;
text-decoration: underline;
font-size: 14px;
line-height: 16px;
padding: 8px 0px 0px;
}
:host([disabled]) [part~=show-button] {
text-decoration: none;
}
:host([value-type=text]) [part~=value-container] {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
font-style: normal;
color: rgb(15, 88, 214);
font-stretch: normal;
line-height: 1.14;
letter-spacing: normal;
}
[part~=value-container] {
padding: 0px 8px 8px 0px;
}
[part~=fallback-text] {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 600;
color: rgb(59, 69, 80);
text-align: center;
padding: 2% 0px;
}
[part~=value-display-label] {
padding: 0px 8px 8px 0px;
min-height: 26px;
}
[part~=disclosure-button] {
margin: 8px;
}
</style>

Please help me with how to change it.

[slangley]

Hi @priyag17.

What version of ThingWorx are you running?  Can you elaborate on the distortion?  It's difficult to tell what the problem is from looking at the screenshot.  Also, please provide some detail around how you want it to look.

It would also be helpful if you could provide your mashup so we can see the styling you are applying.  

Regards.

--Sharon