10

I have a style that I want to keep but it looks like the dependent picklist is only loaded after the controlling picklist has been picked, leaving some really strange Styling. I used a wrapper like this but it just creates a wrapper around the inputfield, which is really strange and ugly (see image below) enter image description here

How can override the styling of the dependent picklist? (will I have to use some Javascript?)

1
  • Are you able to share what you've tried so far? For example, your code? May 21, 2015 at 12:16

2 Answers 2

8
+50

It seems that Salesforce removes all assigned style classes from the dependent picklists. Well, we have to fix it with some javascript tricks. The idea is to re-assign a style class to the dependent picklist after it structure was changed (ie. attributes removed, child elements added).

For that we will use a cool technique with a "MutationObserver" object. Using it we will be able to catch every DOM change on the target element. For example if a "class" attribute removed from the element - re-assign it again.

First define a style class for the picklist. To keep it simple I'll use only a background color "green":

<style>
/* Style class for picklists */
.myListClass {    
    background-color: green;
}
</style>

Then add both picklists to the page. A dependent picklist should be wrapped with some DIV element with an ID and used as a target element for the observer:

<!-- Master and dependent picklists -->
<apex:inputField value="{!acc.MasterList__c}" styleClass="myListClass" />
<div id="selectList">
    <apex:inputField value="{!acc.ChildList__c}"  styleClass="myListClass dependentElement"/>
</div>

Now add a MutationObserver object, a target element (dependent picklist wrapper with an id "selectList") and observer itself.:

<!-- This script should be added AFTER picklists on the page -->
<script>
// Mutation object
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

// Defining observer 
var observer = new MutationObserver(function(mutations) { 
    // If the myListClass was removed from the list - re-assign it
    if(!jQuery('#selectList select').first().hasClass('myListClass')){
        jQuery('#selectList select').first().addClass('myListClass');
    }
});

// A target object fot the observer
var myNode = document.querySelector('#selectList'); 

// Assigning observer to the dependent picklist
observer.observe(myNode, {
    childList: true,
    subtree: true,
    attributes: true
});
</script>

And the result will look like:

enter image description here

4
  • 1
    Thanks, this worked for me! I suppose I will have to settle for the few hundred milliseconds it takes the observer to add the class. May 22, 2015 at 14:31
  • 1
    actually, it is only when the page is loaded that it takes some time to apply. After updates it is as good as instantaneous :) May 22, 2015 at 14:39
  • Be sure to check that the browser supports MutationObserver or you will have a javascript error (IE 8,9,10 not supported). After var MutationObserver is assigned, enclose code within: if (typeof MutationObserver != 'undefined') {... Jul 29, 2015 at 23:31
  • @Sergej Utko , Hi! Can u advise, how can this be implemented with a table? Because only first line implements style.
    – Viktor
    Nov 14, 2018 at 10:48
0

Usually this you can handle using css itself. Use inspect element option in modern browsers like chrome. It will show the final HTML content that is rendered in browser. Then you can apply styleClass Attribute to fields and inspect if the class is setting to the right element in the HTML as you wanted. Chrome developer tools let you modify css on the fly and see how it is affecting display.

Use Javascript as the final resort only. Most of the cases you can manage to do it in css itself. Before going for javascript try to use nth selector option also http://www.w3schools.com/cssref/sel_nth-child.asp

1
  • hi @victor, thanks for your reply. I tried this already and it worked for me, I can change the CSS using JS because as I suspected, a depending picklist overrides the current styleclass after the page has loaded. I will try to use the :nth-child(number) { css declarations; } as you suggested. May 22, 2015 at 10:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .