Hi everyone,

I am working on a visualforce page, which consist of components and tabs. When I am rendering my component it is going out of the form.

This is my code:

<apex:page standardController="On_Study_Pathology_Form__c" extensions="OnStudyPathology" id="pageId">
<script>
    function check() {
        var insertedProcedureIds = document.getElementById('pageId:pageBlockId:pageSectionId:pageCompId:ProcedureComponent:showProcedureForm:insertedProcedureIds').value;
        document.getElementById('pageId:formId:ProcedureIds').value = insertedProcedureIds;
        //alert(document.getElementById('pageId:formId:ProcedureIds').value);
        return true;
    }
    function showDCIS(val){
        if(val.value == 'Yes'){
            document.getElementById('pageId:pageBlockId2').style.display='';
        } else {
            document.getElementById('pageId:pageBlockId2').style.display='none';
        }
    }
    function showLCIS(val){
        if(val.value == 'Yes'){
            document.getElementById('pageId:pageBlockId3').style.display='';
        } else {
            document.getElementById('pageId:pageBlockId3').style.display='none';
        }
    }
    function showITP(val){
        if(val.value == 'Yes'){
            document.getElementById('pageId:pageBlockId4').style.display='';
        } else {
            document.getElementById('pageId:pageBlockId4').style.display='none';
        }
    }
</script>    
    <apex:tabPanel switchType="client" value="{!currentTab}" id="theTabPanel" contentStyle="font-size: 12px;">
        <apex:tab label="Procedure" name="procedureTab" id="ProcedureId" ontabenter="return false;">
            <apex:form onsubmit="return check();" id="formId">
                <apex:inputHidden id="ProcedureIds" value="{!ProcedureIds}" />
                <apex:pageBlock id="blockId">
                    <apex:pageBlockButtons location="top">
                        <apex:commandButton action="{!next}" value="Next" reRender="theTabPanel" status="counterStatus"/>
                        <apex:actionStatus id="counterStatus" startText="Processing..." onstop=""/>
                       </apex:pageBlockButtons>
                       <apex:pageBlockSection columns="1" id="blockSectionId">
                           <apex:pageBlockSectionItem >
                            <apex:outputLabel value="Does the patient have bilateral breast cancer?" for="procedureDate"/>
                            <apex:inputField value="{!ospObj.Does_the_patient_have_bilateral_breast_c__c}" id="procedureDate" required="true"/>
                        </apex:pageBlockSectionItem>
                        <apex:pageBlockSectionItem >
                            <apex:outputLabel value="Tumor laterality (or side with most advanced disease)" for="Tumorlaterality"/>
                            <apex:outputPanel >
                                <apex:inputField value="{!ospObj.Tumor_laterality__c}" id="Tumorlaterality" required="true"/>
                                <apex:outputlabel value="Select the breast that meets the criteria for the study"/>
                            </apex:outputPanel>
                        </apex:pageBlockSectionItem>
                       </apex:pageBlockSection>
                </apex:pageBlock>
            </apex:form>
            <apex:pageBlock title="Positive Breast Biopsies" id="pageBlockId">
                  <apex:pageBlockSection columns="1" id="pageSectionId">
                    <c:ProcedureComponent subForm="On-Study Pathology Form(Positive Breast Biopsies)" id="pageCompId"/>
                </apex:pageBlockSection>
              </apex:pageBlock>
              <apex:pageBlock title="Lymph Node Biopsies" id="pageBlockId1">
                  <apex:pageBlockSection columns="1" id="pageSectionId1">
                    <c:ProcedureComponent subForm="On-Study Pathology Form(Lymph Node Biopsies)" id="pageCompId1"/>
                </apex:pageBlockSection>
              </apex:pageBlock>
        </apex:tab>
         <apex:tab label="Disease Description" name="Disease Description" id="tabTwo" ontabenter="return false;">
             <b>Procedure(s):</b><apex:outputText value="{!tumor}"/>
             <apex:outputPanel >
                 <apex:form onsubmit="return check();">
                     <apex:pageBlock >
                         <apex:pageBlockButtons location="top">
                            <apex:commandButton action="{!next}" value="Next" reRender="theTabPanel" status="counterStatus"/>
                            <apex:actionStatus id="counterStatus" startText="Processing..." onstop=""/>
                           </apex:pageBlockButtons>
                         <apex:pageBlockSection >
                             <apex:pageBlockSectionItem >
                                 <apex:outputLabel value="Is DCIS present?" />
                                 <apex:inputField value="{!ospObj.Is_DCIS_Present__c}" onChange="showDCIS(this);"/>
                             </apex:pageBlockSectionItem>
                         </apex:pageBlockSection>
                     </apex:pageBlock>
                </apex:form>
                <apex:outputPanel id="pageBlockId2" style="display : none;">
                    <apex:pageBlock title="Procedure(s): DCIS Details"  >
                          <apex:pageBlockSection columns="1" id="pageSectionId2">
                            <c:DCIS subFormNew="On-Study Pathology Form" id="compId"/>
                        </apex:pageBlockSection>
                      </apex:pageBlock>
                  </apex:outputPanel>
                  <apex:form onsubmit="return check();">
                     <apex:pageBlock >
                         <apex:pageBlockSection >
                             <apex:pageBlockSectionItem >
                                 <apex:outputLabel value="Is LCIS present?" />
                                 <apex:inputField value="{!ospObj.Is_LCIS_Present__c}" onChange="showLCIS(this);"/>
                             </apex:pageBlockSectionItem>
                         </apex:pageBlockSection>
                     </apex:pageBlock>
                </apex:form>
                <apex:outputPanel id="pageBlockId3" style="display : none;">
                    <apex:pageBlock title="Procedure(s): LCIS Details" >
                          <apex:pageBlockSection columns="1" id="pageSectionId3">
                            <c:LCIS subFormLCIS="On-Study Pathology Form" id="pageCompId3"/>
                        </apex:pageBlockSection>
                      </apex:pageBlock>
                  </apex:outputPanel>
                  <apex:form onsubmit="return check();">
                     <apex:pageBlock >
                         <apex:pageBlockSection >
                             <apex:pageBlockSectionItem >
                                 <apex:outputLabel value="Is invasive tumor present?" />
                                 <apex:inputField value="{!ospObj.Is_invasive_tumor_present__c}" onChange="showITP(this);"/>
                             </apex:pageBlockSectionItem>
                         </apex:pageBlockSection>
                     </apex:pageBlock>
                </apex:form>
                <apex:outputPanel id="pageBlockId4" style="display : none;">
                    <apex:pageBlock title="Invasive Tumor Details" >
                          <apex:pageBlockSection columns="1" id="pageSectionId4">
                            <c:InvasiveTumor subFormIT="On-Study Pathology Form" id="pageCompId4"/>
                        </apex:pageBlockSection>
                      </apex:pageBlock>
                  </apex:outputPanel>
            </apex:outputPanel>
        </apex:tab>
    </apex:tabPanel>

</apex:page>

Please can any one help. Thanks in advance.

Kiran