5 Replies Latest reply on Apr 29, 2016 6:07 AM by sclifford RSS
    sclifford Explorer

    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.