+ Start a Discussion
DrawloopSupportDrawloopSupport 

Visualforce inserting extra li tags

Let's say I have the following visualforce markup:

 

<ol type="1" style="list-style-type: decimal;"> <apex:actionRegion immediate="true"> <apex:outputPanel rendered="{!showLi}" id="liContainer"> <li style="list-style-type: decimal;"> html here </li> </apex:outputPanel> <li> more html </li> </apex:actionRegion> </ol>

 

Now let's say I add in some apex that simply returns a null page reference when clicking a button. The page is rerendered but includes an additional tag like so:

 

<ol type="1" style="list-style-type: decimal;"> <apex:actionRegion immediate="true"> <li style="list-style-position: outside; list-style-image: none; list-style-type: none;"> <apex:outputPanel rendered="{!showLi}" id="liContainer"> <li style="list-style-type: decimal;"> html here </li> </apex:outputPanel> </li> <li> more html </li> </apex:actionRegion> </ol>

 

As one might suspect, this is a problem because it changes the numbering of the list items and indentation. Does anyone have any idea why Visualforce would (intentionally or unintentionally) insert seemingly random html elements?


Thanks!

 

 

DrawloopSupportDrawloopSupport

And it only gets better...  If I add layout="block" to the outputPanel, it adds another seemingly random ul tag:

 

 

<ol type="1" style="list-style-type: decimal;"> <apex:actionRegion immediate="true"> <li style="list-style-position: outside; list-style-image: none; list-style-type: none;"> <apex:outputPanel rendered="{!showLi}" id="liContainer" layout="block"> <ul class="noindent"> <li style="list-style-type: decimal;"> html here </li> </ul> </apex:outputPanel> </li> <li> more html </li> </apex:actionRegion> </ol>

 

 Any help would be greatly appreciated!

 

wesnoltewesnolte

Hey

 

I think it's getting confused because in 

 

the first case: You're nesting a <span> within a <ol> so it thinks you made a mistake

the second case: You're nesting a <div> inside and <ol> and then an <li> inside the <div>. It thinks you forgot the parent and child tags and inserts them for you.

 

Perhaps something like the <apex:dataList> would be of more help as mixing Salesforce and pure HTML in this case seems to be a bit erroneous?

 

Cheers,

Wes 

DrawloopSupportDrawloopSupport

Wesnolte,

 

Are you saying that Visualforce is inserting the html or the browser? I have tested in multiple browsers and it still seems to do the same thing. Why would Visualforce even care about the html on the page? That seems a bit overpowering.

 

With a datatable, I would have to specify a value and a var, which is not necessary in my case. There is no vf component that corresponds to an li tag in html, otherwise, I would have used it.

 

I am going to open a ticket with Salesforce and see what they make of it.

 

Thanks.

wesnoltewesnolte

A ticket might be a good idea:) Salesforce itself is generating that extra code, either through mistake, or for some specific reason, perhaps web-standard conformity. I'm interested in what they'd tell you as I've had to use li tags myself at times, but never in the way you've combined them with visualforce.

 

Good luck,

Wes 

DrawloopSupportDrawloopSupport
Salesforce Case #02734563
DrawloopSupportDrawloopSupport

For any Salesforce people interested in seeing this problem in action, use the code below. Push the command button twice to see the problem.

 

Visualforce

 

<apex:page controller="sfTest" action="{!onload}"> <apex:form id="test"> <ol> <apex:outputPanel rendered="{!showOp}" id="op"> <li> This item should be #{!one}. </li> </apex:outputPanel> <li> This item should be #{!two}. </li> <li> This item should be #{!three}. </li> </ol> <apex:commandButton action="{!go}" reRender="test" value="show/hide outputPanel" /> </apex:form> </apex:page>

 

 Apex

 

public class sfTest { public void onload() { showOp = true; one = 1; two = 2; three = 3; } public PageReference go() { showOp = !showOp; if (showOp) { two = 2; three = 3; } else { two = 1; three = 2; } return null; } public boolean showOp { get; set; } public integer one { get; set; } public integer two { get; set; } public integer three { get; set; } }

 

 

 

 

DrawloopSupportDrawloopSupport
Salesforce has responded that the issue is related to a bug that they are already aware of and that they are currently working on a solution. It was indicated to me that it should be fixed soon, although not sure on exact timing.