Avoid Salesforce Apex components being wrapped with <span> elements

1
votes

I'm new to Salesforce Apex and struggling a bit on some nuances. My problem is all the Salesforce components like knowledge:categoryList or knowledge:articleList are wrapped with extra span elements when get rendered, which is far from what initially needed. Things like:

<ul>
    <span>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </span>
</ul>

are semantically wrong at least, but further more they are breaking the markup when using libraries like Bootstrap. Is there a solution for this? Or maybe I am wrong at some point?

UPD Small example:

This...

<ul class="nav nav-tabs" role="tablist">
    <knowledge:categoryList categoryVar="category" categoryGroup="Help" rootCategory="Using_{!selectedCategory}" level="1">
        <li role="presentation">
            <a href="#{!category.name}" aria-controls="basics" role="tab" data-toggle="tab">{!category.label}</a>
        </li>
    </knowledge:categoryList>
</ul>

...is rendered as...

<ul class="nav nav-tabs" role="tablist">
    <span id="j_id0:j_id1:j_id37"> // <!-- how to remove this wrapper? -->
        <li role="presentation">
            <a href="#" aria-controls="basics" role="tab" data-toggle="tab">One</a>
        </li>
        <li role="presentation">
            <a href="#" aria-controls="basics" role="tab" data-toggle="tab">Two</a>
        </li>
        <li role="presentation">
            <a href="#" aria-controls="basics" role="tab" data-toggle="tab">Three</a>
        </li>
    </span> <!-- ??? -->
</ul>
2
salesforceapex

2 Answers

1
votes

Currently there is no ability to configure how Visualforce tags are rendered on page.

If you want to have a control on front-end side in SF you should develop it manually with any JS/CSS libs/frameworks avoiding to use Visualforce tags. For processing data and interacting with server side you can use Visualforce Remote Objects or JavaScript Remoting and actionFunctions.

1
votes

Ok, I've managed to fix this with small jQuery snippet:

(function ($) { 
    $(document).ready(function () {
        var allSpansAndDivs = $('span, div');
        $.each(allSpansAndDivs, function (index, elem) {
            if ($(this).attr('id') != undefined && $(this).attr('id').indexOf('j_') > -1) {
                $(this).children().first().unwrap();
            }
        });
    });
})(jQuery);