Value Display widget on text wrapping appears distorted
‎Oct 16, 2020
03:14 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
‎Oct 16, 2020
03:14 AM
Value Display widget on text wrapping appears distorted
With text wrapping in Value Display widget the textbox appears distorted. This is due to style of box-shadow as
[part~=disclosure-button-overlay] {
- 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>
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.
Labels:
- Labels:
-
Mashup-Widget
1 REPLY 1
‎Oct 27, 2020
11:04 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
‎Oct 27, 2020
11:04 AM
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