4

Whenever I try to rerender an outputpanel with an outputlink inside of it that has a <div> ( or other block elements ) inside of it, the <a> gets closed on rerender.

Instead of

<a href="#">
    <div>hi</div>
</a>`

I get:

<a href="#"></a>
<div>hi</div>

I validated all of the surrounding HTML and all of the HTML seems okay.

Any tips on how to fix this? Changing the display layout of the elements inside the link works, of course, but doesn't really solve the problem.

Edit - here is my actual code:

<apex:outputLink value="#">
    <div class="icon">
        <i class="fa fa-icon"></i>
    </div>
    <h4>Header</h4>
    <p class="description">this is a description</p>
</apex:outputLink>

Making the <div> a <span> helps, and making the <p> an outputPanel helps, but I can't figure out the <h4>. ( making these changes is NOT ideal ).

7
  • At least with HTML4, a div inside an anchor isn't valid. I would agree with Eric, try using a span and display it as a block. Have you tried using the outputLink and outputPanel tags, and changing the outputPanel's layout to block? Commented Oct 7, 2014 at 14:18
  • 1
    @ThomasCrouse I have done few things: wrapping everything in an output panel creates like 3 or 4 extra <a> tags (lol). I've actually been able to get everything but the <h4> to work when display:inline. No matter what I do, I can't get the h4 to stop the page from breaking. Even when display inline. Is there an apex tag that translates to an h#? Commented Oct 7, 2014 at 14:37
  • apex:sectionHeader translates to header tag(s), but that's probably not what you're looking for. I've encountered issues as well trying to conditionally render headers and ended up just styling apex:outputText instead. Do you have a more complete sample of your page to share? <h4> isn't included in your current sample. Commented Oct 7, 2014 at 15:01
  • @ThomasCrouse my actual code was added! Commented Oct 7, 2014 at 15:48
  • 1
    Salesforce wraps <a> tags around divs all over the place. It's a thing, and VF should allow it, but definitely does not. Commented Oct 9, 2014 at 16:36

2 Answers 2

1

Do you have to have a <DIV>?

If not, <span> works as expected

1
  • maybe if I give them display:inline-block. If it fixes the problem, cool, but the rerender definitely shouldn't be dependant on the element types in between. Commented Oct 6, 2014 at 23:23
0

Run into the same problem. Solved it with converting all the items inside to and writing display:block for this items in .css file.

You must log in to answer this question.

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