Community Tip - Visit the PTCooler (the community lounge) to get to know your fellow community members and check out some of Dale's Friday Humor posts! X
Link widget Text does not display below the image when viewing mashup.
Here are the properties of the Link widget:
LinkStyle style definition has a 304x170px image specified.
The issue appears to be the CSS styling "line-height: 200px;" on the <a> tag in the generated HTML (see below). If I remove the line-height style (using Developer tools in browser), it works as expected.
<div id="root_Link-16-bounding-box" class="widget-bounding-box nonresponsive" style="top: 90px; left: 40px; width: 305px; height: 200px; z-index: 1510;">
<div id="root_Link-16-data-error" class="data-error" style="width: 305px;height: 200px; display:none;"></div>
<div class="widget-content widget-link-container" id="root_Link-16" style="width: 305px; height: 200px;">
<style>#root_Link-16 { background: transparent; -ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); filter:none;border: none; }#root_Link-16 .widget-link { color : #009fbd; font-weight:normal; font-style:normal; text-decoration:none; }#root_Link-16 .widget-link:hover { background: transparent; -ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); filter:none; color : #2a6496; font-weight:normal; font-style:normal; text-decoration:none; }</style>
<a class="widget-link textsize-xlarge imageTop" href="/Thingworx/Runtime/index.html#master=myMaster&mashup=myMashup" target="_blank" style="line-height:200px; text-align:left">
<span class="link-content-container">
<span class="image-text-container">
<img class="default" src="/Thingworx/MediaEntities/Landing_vPulseTile">
<span class="link-text">vPulse</span>
</span>
</span>
</a>
</div>
</div>
Tested and not working on Chrome 49, Firefox 46, and IE11.
Which version of ThingWorx are you working on? I tested on my ThingWorx and works fine as below. Mine is 6.6.2-b418.
Hi Daniel,
Thanks for your reply. My Thingworx version is 6.5.0-b460.
I have verified that version 6.5.0 works as expected when LinkDisplay is set as Text Only, but I'm trying to use the image option.
Have you tested with an image above the text in 6.6.0?
Image is added to the custom Style Definition used for the LinkStyle property.
And LinkDisplay property is set to Image Above Text.
Double height container and "Link Text" text is not visible.
Thanks,
Shane
Yes, I tested with a custom style with image on 6.6 as below.
Also, I tested on the same version that you have, but it works fine for me. Can you please more in details what you have done for this?
I have done nothing more than the above basic configuration on a single Link widget on a static Mashup.
In my View Mashup, the span element for the text is there, but the text is not visible. Also, the text is no longer immediately underneath the image (even in your screen capture) like it was back in the composer. This is not ideal either.
I have found that disabling the line-height: 200px CSS styling on the parent <a> tag fixes both problems. Which makes sense, as the <span> children elements inherit the line-height property.
Thanks,
Shane