5

Situation

I've implemented a dependent and a controlling picklist field.

<apex:inputField value="control__c" styleClass="abc" />
<apex:inputField value="dependent__c" styleClass="def" />

Issue

The style class "def" doesn't appear in the resulting html code:

<span>
    <select id="j_id0:j_id14" name="j_id0:j_id14" disabled="" >
        <option value="__">--None--</option>
    </select>
    <input type="hidden" name="j_id0:j_id14 value="__">
</span>
5

I can demonstrate that there is a bug in Visualforce's handling of dependent picklists where all of the following attributes are not rendered properly and do not work:

  • onblur
  • onchange
  • onclick
  • ondblclick
  • onfocus
  • onkeydown
  • onkeypress
  • onkeyup
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onselect
  • style
  • styleClass
  • all HTML pass-through attributes

If you create an <apex:inputField> containing any of these attributes, they are not displayed in your visualforce page when it is loaded.

I'm in the process of filing a bug report and hoping that SFDC will be responsive!

In the meantime, I recommend using mast0r's solution.

2

Really strange behavior.

It seems that SF recognizes this issue:

The CSS style class used to display the inputField component. This attribute may not work for all values. If your text requires a class name, use a wrapping span tag.

As workaround you can wrap your lists with some DIV and assign a style class to this element:

<style>
    .myStyle select{
        color:red;
    }
</style>

<div class="myStyle">
    <apex:inputField value="{!test1obj.DependenList1__c}" id="list1"/>
    <apex:inputField value="{!test1obj.DependenList2__c}" id="list2"/>
</div>
0

You could try using HTML pass-through attributes, as they are supported by the inputField component.

<apex:inputField value="control__c" html-class="abc" />
<apex:inputField value="dependent__c" html-class="def" />

Update:

In case the class attribute is still not rendered, you could do a workaround by using some custom attributes set via HTML pass-through attributes, and styling the elements with CSS selectors targeting the custom attributes:

<style type="text/css">
input[data-cssclass=abc] { color:red; }
input[data-cssclass=def] { color:blue; }
</style>
<apex:inputField value="control__c" html-data-cssclass="abc" />
<apex:inputField value="dependent__c" html-data-cssclass="def" />
  • sounds like a solution but isn't one. I tried it and the "html-class" attribute doesn't work. – Christian Deckert Aug 14 '14 at 13:04
  • updated my answer with a potential alternative – dino ursic Aug 14 '14 at 13:11
  • Thanks for your answer. But no "html-" attribute works. – Christian Deckert Aug 14 '14 at 13:16
0

A workaround is to use apex:pageBlockSectionItem with a dataStyleClass attribute.

Below I show example of simple visualforce markup and what the generated HTML looks like. Knowing the HTML structure we can devise appropriate CSS selectors to apply our own styling or for using jQuery to get the value, etc.

Visualforce Markup

<apex:inputField value="{!myObj.controllingPicklist__c}"/>

<apex:pageBlockSectionItem dataStyleClass="foo">
    <apex:outputLabel value="Dependent Picklist"/>
    <apex:inputField value="{!myObj.dependentPicklist__c}" required="true"/>
</apex:pageBlockSectionItem>

Generated HTML Markup

<!--
    one of the two <td> blocks will be generated
    depending on if required="true" attribute is used
 -->

<!-- if required="true" -->
<td class="dataCol foo">
    <div class="requiredInput">
        <div class="requiredBlock"></div>
        <span>
            <select id="j_id0" name="j_id0">
                <option value="Red">Red</option>
                <option value="Blue">Blue</option>
            </select>
        </span>
    </div>
</td>

<!-- if required="false" -->
<td class="dataCol foo">
    <span>
        <select id="j_id0" name="j_id0">
            <option value="Red">Red</option>
            <option value="Blue">Blue</option>
        </select>
    </span>
</td>

Regardless if required attribute used or not, the CSS selector is simply:

CSS Styling

<style>
    .foo select {
        /* apply styling to the select input */
    }
</style>

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.