cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Link widget with image above text, does not display text?

Highlighted
Newbie

Link widget with image above text, does not display text?

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&amp;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.

5 REPLIES 5

Re: Link widget with image above text, does not display text?

Which version of ThingWorx are you working on? I tested on my ThingWorx and works fine as below. Mine is 6.6.2-b418.

Re: Link widget with image above text, does not display text?

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

Re: Link widget with image above text, does not display text?

Yes, I tested with a custom style with image on 6.6 as below.

Re: Link widget with image above text, does not display text?

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?

Re: Link widget with image above text, does not display text?

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