Community Tip - Your Friends List is a way to easily have access to the community members that you interact with the most! X
Hi,
I am trying to view base64 pdf using thingworx mashup.
Came across old message that helped me view the pdf using a value display widget
The problem the value container height is 153px (width 1879) and not full screen
Tried changing min height property but did nothing.
Anyone can help view a base64 pdf to fit window?
Solved! Go to Solution.
Hi Arun,
Your suggestion did not fix my issue as I wanted the pdf to fit the screen.
But once I saw that using pixels indeed had effect, that gave me direction for a fix.
The problem is the widget placing the iframe inside a span, for some reason by default it is not 100%.
a little custom css did the trick and for others I will post it below.
.screen-100 .widget-ptcsvaluedisplay::part(item-value) {
width: 100%;
height: 100%;
}
.screen-100 .widget-ptcsvaluedisplay::part(item-value-container) {
width: 100%;
height: 100%;
}
.screen-100 .widget-ptcsvaluedisplay::part(value-container) {
width: 100%;
height: 100%;
}
.screen-100 .widget-ptcsvaluedisplay::part(overflow-control) {
width: 100%;
height: 100%;
}
"screen-100" is the custom css name placed in the widget CustomClass property.
Best Regards,
Tomer.
Hi @TomerH
Have you tried with the fixed height & width in pixels?
result = '<iframe src="data:application/pdf;base64,'+ IP_Data+ '" height="153px" width="1879px" frameborder="0"></iframe>';
If its not okey for you. We will look for other sugestions.
Thanks & Regards,
Arun C
Hi Arun,
Your suggestion did not fix my issue as I wanted the pdf to fit the screen.
But once I saw that using pixels indeed had effect, that gave me direction for a fix.
The problem is the widget placing the iframe inside a span, for some reason by default it is not 100%.
a little custom css did the trick and for others I will post it below.
.screen-100 .widget-ptcsvaluedisplay::part(item-value) {
width: 100%;
height: 100%;
}
.screen-100 .widget-ptcsvaluedisplay::part(item-value-container) {
width: 100%;
height: 100%;
}
.screen-100 .widget-ptcsvaluedisplay::part(value-container) {
width: 100%;
height: 100%;
}
.screen-100 .widget-ptcsvaluedisplay::part(overflow-control) {
width: 100%;
height: 100%;
}
"screen-100" is the custom css name placed in the widget CustomClass property.
Best Regards,
Tomer.