Skip to main content
P
priyag171-Visitor
1-Visitor
October 16, 2020
Question

Value Display widget on text wrapping appears distorted

  • October 16, 2020
  • 1 reply
  • 1343 views

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.

    1 reply

    S
    slangleyCommunity Manager
    Community Manager
    October 27, 2020

    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

    Terms & ConditionsCookie settingsAccessibility statement