Skip to main content
1-Visitor
April 27, 2016
Question

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

  • April 27, 2016
  • 1 reply
  • 3154 views

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.

1 reply

5-Regular Member
April 28, 2016

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

sclifford1-VisitorAuthor
1-Visitor
April 29, 2016

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

5-Regular Member
April 29, 2016

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