0

I am a novice Salesforce developer, and I am stuck with one issue. I want to apply a Hyperlink to set of Words, but it is getting applied to the entire line.

The code is:

<div class="instance-section">
    <h1>History</h1>

    <apex:outputPanel>
        <a class="testClass" target="_top" href="{!$Site.Prefix}/home/home.jsp"> &lt;&lt; back to portal</a>
    </apex:outputPanel>
</div>

Here, the entire line of BACK TO PORTAL shows the hyperlink, i mean from the left of the screen to the right.

I want only the words to act as the link, which is the normal scenario. I have tried putting SPAN, using OutputText, with no success.

Please help. Thanks.

The entire line acting as a link.

3
  • Could you post an image and give us the css?
    – feddus
    Nov 12, 2015 at 11:18
  • @feddus Hi, I don't have the access to the CSS. Nov 12, 2015 at 11:31
  • try to remove class="testClass" and see if something happens
    – MIX DML
    Nov 12, 2015 at 11:34

2 Answers 2

-1

This could be the CSS style "testClass" specifying the width of the element.

Try it without the style applied to confirm that it is the result of the style.

<div class="instance-section">
    <h1>History</h1>

    <apex:outputPanel>
        <a target="_top" href="{!$Site.Prefix}/home/home.jsp"> &lt;&lt; back to portal</a>
    </apex:outputPanel>
</div>

Once confirmed, you can check the style and amend it appropriately

--- edit, since you can't amend the CSS

You can try either a) leave the class in, and override the particular parts that you want to remove in the style tag

<a target="_top" class="testClass" style="width=...(or whatever)" href="{!$Site.Prefix}/home/home.jsp"> &lt;&lt; back to portal</a>

b) remove the class, and recreate the bits you want to keep in the style tag

<a target="_top" style="...the bits of style that are applicable..." href="{!$Site.Prefix}/home/home.jsp"> &lt;&lt; back to portal</a>
6
  • Can you share the CSS definition of "testClass"?
    – Doug B
    Nov 12, 2015 at 11:58
  • I dont have access to the CSS. Considering that there IS a width definition, can it be overriden ? Nov 12, 2015 at 11:58
  • You can use something like FireBug extension in Firefox, or Web Developer in Chrome to see what style is being applied to the rendered page.
    – Doug B
    Nov 12, 2015 at 12:00
  • I have found that the 'testClass' is the culprit. After removing it, normal functionality is being restored. But I dont have the access to the CSS. Nov 12, 2015 at 12:11
  • Is there a way to override the 'testClass'? Nov 12, 2015 at 12:11
0

I tested in my Vf page, the same code. Its appearing as given below. Please share your screenshot if it is not appearing like this.

screenshot

1
  • Hi, I have added the snapshot as it appears on my screen in the question. I had made some text changes to make the readability easier. Nov 12, 2015 at 11:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .