1

I've added an apex:selectList inside of a table column in a visualforce page. The rendered output is wrong - the selectList doesn't show up in the correct column - it actually gets rendered in a new row along with some other misc table row / column tags:

Visualforce page markup:

<table>
    <thead>
        <tr>
            <th>Item</th>
            <th>Lead Source</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>
                <apex:selectList value="{!item1LeadSource}" size="1">
                    <apex:selectOptions value="{!leadSources}"/>
                </apex:selectList>
            </td>
        </tr>
    </tbody>
</table>

Rendered output

<table>
    <thead>
        <tr>
            <th>Donation Source</th>
            <th>Lead Source</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td></td>
        </tr>
        <tr>
            <td class="data2Col " colspan="2">
                <select name="j_id0:j_id28:j_id33:j_id34:j_id39" size="1">  
                    <option value="Web" selected="selected">Web</option>
                    <option value="Phone Inquiry">Phone Inquiry</option>
                    <option value="Partner Referral">Partner Referral</option>
                    <option value="Purchased List">Purchased List</option>
                    <option value="Other">Other</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="data2Col " colspan="2">
            </td>
        </tr>
    </tbody>
</table>

Is this normal?

  • 1
    Remember that these apex:... tags are designed to work together to produce heavily styled HTML/CSS output from some quite simple markup. I suggest you stick to all apex:... tags or all raw HTML (just using things like apex:repeat) rather than mixing the two. Using all apex:... keeps your pages styled consistently with the platform; using raw HTMl allows you to do your own thing. – Keith C Jun 9 '15 at 13:42
  • Yes, this would be "normal". I recommend the following resources Visualforce Workbook and the Visualforce Developer’s Guide. – crmprogdev Jun 9 '15 at 13:46
  • @KeithC I tried building the options by using apex:repeat instead of selectList + selectOptions - the result was the options were wrapped in their own tags too (not a child of the select tags). – Dan Bough Jun 9 '15 at 13:48
  • @crmprogdev The first link is broken, the second link is generic. – Dan Bough Jun 9 '15 at 13:49
  • Thanks Dan. SF has been changing all their docs. Here's the correct link: Visualforce Workbook. – crmprogdev Jun 9 '15 at 13:55
1

In response to the comment thread, going the raw HTML route, this page:

<apex:page controller="TestController">
    <select>
        <apex:repeat value="{!options}" var="o">
            <option value="{!o.value}">{!o.label}</option>
        </apex:repeat>
    </select>
</apex:page>

and this controller:

public class TestController {
    public SelectOption[] options {
        get {
            return new SelectOption[] {
                    new SelectOption('abc', 'abc'),
                    new SelectOption('def', 'def')
                    };
        }
   }
}

will output this HTML:

<select>
        <option value="abc">abc</option>
        <option value="def">def</option>
</select>

(You don't have to use the SelectOption class especially if the values and labels are the same.)

  • Thanks! This code produced a similar issue in that the options ended up outside of the select tags in the page I'm working on. I set up another test page that only contained this code and it worked fine. So I think the answer to my original question ("is this normal") is 'No' - there is something else going on in my page that is breaking things. – Dan Bough Jun 9 '15 at 14:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.