This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal



~Zelda Prefooplopikle
Aug 20, 2012, 10:08 PM
21 Posts

Aligning text and image when using the Link control

  • Category: Other
  • Platform: Windows
  • Release: 8.5.3
  • Role: Developer
  • Tags: link control
  • Replies: 2
I have a mail icon (17x16 pix) that I want to prefix the text "Contact Us".  So I added a Link control, put the text in and added the icon.  But I can't get the icon and the text to line up.  I've used every trick I can think of.  Here's how it's currently defined:
 
<xp:link escape="true" text="CONTACT US" id="link1"
styleClass="leftcoltxt"
style="color:rgb(0,0,0);text-decoration:none">
<xp:image id="image2" url="/rmail.jpg" style="vertical-align: middle"></xp:image>
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:openPage name="/rContactUs.xsp"></xp:openPage>
</xp:this.action>
</xp:eventHandler>
</xp:link> 
 
 
I'm using Blueprint. 
 
I was able to center align text using a larger image (120x50 pix) and using this trick:
 
<xp:panel styleClass="span-24 last" style="position:relative">
<xp:image url="/rsdi_logo.jpg" id="image2"></xp:image>
<xp:link escape="true" text="this should be alligned"
id="link2" style="position:absolute; top:50%">
</xp:link>
</xp:panel>
 
Any hints on how to align text and small images? 
 
thanks 
clem 
~Sigmund Zekreskioni
Aug 29, 2012, 9:04 AM
93 Posts
Re: Aligning text and image when using the Link control
 Hi Clem,
 
I had exactly the same problem, tried lots of things but just couldn't get it to work so did this as a workaround. 
 
As I had space constraints, if the link text was too long, it would start aligned central to the image, but then the 2nd line of text would wrap under the image and look horrible.
 
I created a table, 2 columns. Put the image in cell1, and the link in cell2, rather than including the image as part of the link. 
 
Not ideal, but I needed it done quickly and this was the quickest and easiest way I could think of at the time. 
 
Not sure if this helps you at all? 
 
<xp:table>
<xp:tr>
<xp:td style="height:40.0px;width:65.0px">
<xp:image url="/RandomImage.jpg" id="RandomImage"></xp:image>
</xp:td>
<xp:td style="height:40.0px">
<xp:link escape="true" id="RandomLink"
style="font-weight:bold;color:rgb(95,95,95)"
text="Random Text">

<xp:this.value><![CDATA[#{javascript:"Notes://[LINK]";}]]></xp:this.value>


</xp:link>
</xp:td>
</xp:tr>
</xp:table> 
~Zelda Prefooplopikle
Aug 29, 2012, 1:33 PM
21 Posts
Re: Aligning text and image when using the Link control -- THANKS!
 Hi Chris
 
 Thanks for the tip.  I was SURE I had tried that and it hadn't worked.  But I tried it again and it worked like a charm.   
 
thanks! 
clem 

This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal