SharePoint 2010: Why is my new inline style not being rendered through the SharePoint client object model?

My page has a DIV that needs to be hidden based on some runtime logic. I was running my code after the page loaded,

 SP.SOD.executeOrDelayUntilScriptLoaded(function () {
        hideMyStuff($data);
    }, "SP.js");

My function 'hideMyStuff' called another function to handle the hiding logic. My hiding code was simple:

function hideDIV(divId)
{
    document.getElementById(divId).style.display = 'none';
}

That should work, but nothing was happening. On further inspection, I noticed that the CSS class in the page was using a lot of '!important' with its CSS settings, which was overriding my code.

This left 2 options to resolve the problem:

1. Sledgehammer approach: set the value with !important.
The method would become
    document.getElementById(divId).style.display = 'none!important';

2. Stylish approach:  add a new class to the DIV at runtime.
The class is simple:
.hidden {
    display:none;
}

and the hide method (using JQuery) becomes:
 $("#" + divId).addClass('hidden');

Comments

Popular posts from this blog

SharePoint 2013: Error updating managed account credentials

Error deploying Nintex workflow: An item with the same key has already been added