Adding styleclass to Salesforce dependent picklist fields(VF Page).

Problem : Adding Styleclass for Salesforce dependent picklist .

Description : Eventhough we add style or styleclass to dependent picklist fields, it does not rendered in page or it seems.,

<apex:inputField value=”{!Test.Field1__c}” styleClass=”form-control”/>
<apex:inputField value=”{!Test.Field2__c}” styleClass=”form-control”/>
<apex:inputField value=”{!Test.Field3__c}” styleClass=”form-control”/>

Above is the 3 dependent fields in vf page. In vf page eventhough am specifying the style class, when viewed its seems like class was not appending.

Untitled

Solution:  After a long search, found a solution.

The style class is added through MutationObserver.(It’s the only solution i found)

<apex:inputField value=”{!Test.Field1__c}” styleClass=”form-control”/>
<div id=”dependentlst1″>
<apex:inputField value=”{!Test.Field2__c}” styleClass=”form-control”/>
</div>
<div id=”dependentlst2″>
<apex:inputField value=”{!Test.Field3__c}” styleClass=”form-control”/>
</div>

<script>
// MutationObserver detect changes in the document
var MutationObserver = window.WebKitMutationObserver || window.MutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(mutations) {
// If the form-control was removed from the list – re-assign it
if(!$(‘#dependentlst1 select’).first().hasClass(‘form-control’)){
$(‘#dependentlst1 select’).first().addClass(‘form-control’);
}
if(!$(‘#dependentlst2 select’).first().hasClass(‘form-control’)){
$(‘#dependentlst2 select’).first().addClass(‘form-control’);
}
});

var dependentlst1 = document.querySelector(‘#dependentlst1’);
var dependentlst2 = document.querySelector(‘#dependentlst2’);
observer.observe(dependentlst1, {
childList: true,
subtree: true,
attributes: true
});
observer.observe(dependentlst2, {
childList: true,
subtree: true,
attributes: true
});
</script>

after this the vf page looks like this.. 🙂 .. way better…

Untitled

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s