0

I have a custom VF page. when user select a value it will hide a page blco section. When it hide, it will make a empty back ground space as below, enter image description here

Before hide sections After Hide Sections enter image description here

Is there any way i can get rid of the space. Thanks

VF code

   <apex:pageBlockSection columns="1"  id="thePageBlockSection2">
    <apex:inputField value="{!Product_Brief__c.Customization_Type__c}" id="myPicklist2" onchange="myPicklistChanged();"/>
</apex:pageBlockSection>

<div id="section5">
    <apex:pageBlockSection title="Section 5: Formulation Modification collapsible="false" columns="1">
        <apex:pageBlock >
            //stuff
        </apex:pageBlock>
    </apex:pageBlockSection>
</div>

<div id="section6">
    <apex:pageBlockSection title="Section 6: QC Testing " collapsible="false" columns="1" >
        // stuff       
    </apex:pageBlockSection>
</div>

JavaScript

function myPicklistChanged(){
        var myPicklistElement = document.getElementById('{!$Component.theForm.thePageBlock.thePageBlockSection2.myPicklist2}');
        var myPicklistValue = myPicklistElement.options[myPicklistElement.selectedIndex].value;

        if (myPicklistValue == 'Existing SKU in different packaging'){
            document.getElementById("section5").style.visibility = "hidden";
            document.getElementById("section6").style.visibility = "hidden";
            }
        else if (myPicklistValue == 'Existing SKU - modification of formulation, QC or other specifications'){
            document.getElementById("section5").style.visibility = "visible";
            document.getElementById("section6").style.visibility = "visible";
            }
        else if (myPicklistValue == 'New Formulation - attach formulation including name and concentration for each chemical'){
            document.getElementById("section5").style.visibility = "hidden";
            document.getElementById("section6").style.visibility = "visible";
            }
        }
1
  • 1
    This really doesn't even qualify as a salesforce.com question.
    – sfdcfox
    Commented Aug 11, 2015 at 22:45

2 Answers 2

3

CSS "visibility" doesn't change the box model. In other words, hiding an element this way doesn't automatically reflow the page.

Instead, use:

document.getElementById("...").style.display = "none";

To hide the object, and...

document.getElementById("...").style.display = "";

... to show the object again.

2

Instead of setting the visibility to hidden, set display to none. This will make the section disappear completely and prevent it from blocking any further space.

document.getElementById("section5").style.visibility = "hidden";
document.getElementById("section6").style.visibility = "visible";

would become

document.getElementById("section5").style.display = "none";
document.getElementById("section6").style.display = "block";

You must log in to answer this question.

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