VF Page section falls out of frame

Can someone please explain (and possibly fix) why the last section on my VF Page falls out of the frame? The other frames stay within the "page" but the last section falls off.

User-added image

<apex:page standardController="License_Numbers__c" recordSetvar="lic" extensions="LicenseList" showHeader="false" sidebar="false">
<!------------------------------------------------------------------------------------------------------>
<!--Based on option chosen for License Type, will show description of that license type-->
<apex:pageBlock title="License Definitions">
<apex:form id="theForm">
<apex:pageBlockSection columns="1">
<apex:selectList label="Please select a License Type"  value="{!discountScheduleID}" size="1" >
   <apex:actionSupport event="onchange" action="{!displayDescription}" rerender="description"/>
   <apex:selectOptions value="{!schedules}" />
</apex:selectList> 

<apex:outputText label="Description" id="description" value="{!OutPutString}"/>

<br></br><br></br><br></br><br></br>
</apex:pageBlockSection>
</apex:form>
</apex:pageBlock>
<!---------------------------------------------------------------------------------------------------->
<apex:form >
<!--displays the licenses that are owned by your business unit (declared on User record)-->
<apex:pageBlock title="Current Licenses">
<apex:pageBlockSection columns="1">

<apex:pageBlockTable value="{!LicenseList}" var="ln">

<apex:outputLink value="{!ln.Id}">{!ln.Name}</apex:outputLink>

<apex:column value="{!ln.Org__c}" />
<apex:column value="{!ln.Business_Unit__c}" />
<apex:column value="{!ln.BMS_Code__c}" />
<apex:column value="{!ln.License_Type__c}" />
<apex:column value="{!ln.Monthly_Unit_Price__c}" />
<apex:column headerValue="2016 Starting Amount" value="{!ln.X2016_Starting_Amount__c}" />
<apex:column headerValue="2016 Running License Total" value="{!ln.Running_License_Total__c}" />
<apex:column headerValue="2016 Annualized Cost" value="{!ln.X2016_Subtotal__c}" />
<apex:column headerValue="2016 Cost" value="{!ln.X2016_Cost__c}"/>

</apex:pageBlockTable>
</apex:pageBlockSection>

                
          
</apex:pageBlock>

</apex:form>

<apex:panelGrid columns="1">

</apex:panelGrid>



<!--------------------------------------------------------------------------------------------------------->
<apex:form id="theForm">
<apex:pageBlock id="blockId" title="2017 License Needs">
<apex:pageBlockSection columns="1">

<td>
<apex:outputText style="font-weight:800" label="Total 2017 Annualized Cost" value="${0, number, ###,###,###,##0.00}">
    <apex:param value="{!tTotal}" />
</apex:outputText>
</td>
<td>
<apex:outputText style="font-weight:800" label="Total 2017 Estimated Cost" value="${0, number, ###,###,###,##0.00}">
    <apex:param value="{!aTotal}" />
</apex:outputText>
</td>
</apex:pageBlockSection>

<!-------------------------------------------------------------------------------------------------->


<apex:pageBlockTable value="{!LicenseList17}" var="ln17">

<apex:outputLink value="{!ln17.Id}">{!ln17.Name}</apex:outputLink>
<apex:column >
<apex:commandbutton value="Edit" rerender="blockId" rendered="{!!(tobeEdited == ln17.id)}">
    <apex:param assignTo="{!tobeEdited}" value="{!ln17.id}" name="ittobeedited"/>
</apex:commandbutton>
<apex:commandButton value="Save" action="{!saveRecord}" reRender="blockId" rendered="{!tobeEdited == ln17.id}"/>
</apex:column> 

<apex:column value="{!ln17.Org__c}" />

<apex:column headerValue="BMS Code">
    <!--Allows it to be edited-->
    <apex:inputfield value="{!ln17.BMS_Code__c}" rendered="{!tobeEdited == ln17.id}"/>
    <!--After Save-->
    <apex:outputField value="{!ln17.BMS_Code__c}" rendered="{!!(tobeEdited == ln17.id)}"/>
</apex:column>    

<apex:column value="{!ln17.License_Type__c}"/>

<apex:column headerValue="BU Agrees to Pay">
    <apex:inputfield value="{!ln17.BU_Agrees_to_Pay__c}" rendered="{!tobeEdited == ln17.id}"/>
    <apex:outputField value="{!ln17.BU_Agrees_to_Pay__c}" rendered="{!!(tobeEdited == ln17.id)}"/>
</apex:column> 

<apex:column value="{!ln17.Monthly_Unit_Price__c}" />

<apex:column headerValue="2017 Number Needed">
    <apex:inputfield value="{!ln17.X2017_Total_Needed__c}" rendered="{!tobeEdited == ln17.id}"/>
    <apex:outputField value="{!ln17.X2017_Total_Needed__c}" rendered="{!!(tobeEdited == ln17.id)}"/>
</apex:column>    

<apex:column headerValue="2017 Annualized Cost" value="{!ln17.X2017_Subtotal__c}" />

<apex:column headerValue="Estimated 2017 Cost" value="{!ln17.X2017_Cost__c}"/>


</apex:pageBlockTable>

</apex:pageBlock>

<!------------------------------------------------------------------------------------------>
<apex:pageBlock title="New Licenses Needed for 2017">

<apex:pageBlockTable value="{!wrappers}" var="wrapper" id="wtable">

<apex:column HeaderValue="Org">
<apex:inputField value="{!wrapper.lic.Org__c}" />
</apex:column>

<apex:column HeaderValue="Business Unit">
<apex:inputField value="{!wrapper.lic.Business_Unit__c}" />
</apex:column>

<apex:column HeaderValue="BMS Code">
<apex:inputField value="{!wrapper.lic.BMS_Code__c}" />
</apex:column>

<apex:column HeaderValue="License Type">
<apex:inputField value="{!wrapper.lic.License_Type__c}"  />
</apex:column>

<apex:column HeaderValue="BU Agrees to Pay">
<apex:inputField value="{!wrapper.lic.BU_Agrees_to_Pay__c}" />
</apex:column>

<apex:column HeaderValue="2017 Number Needed">
<apex:inputField value="{!wrapper.lic.X2017_Total_Needed__c}" />
</apex:column>

<apex:column HeaderValue="License Year">
<apex:inputField value="{!wrapper.lic.License_Year__c}" />
</apex:column>

</apex:pageBlockTable>


</apex:pageBlock>
<apex:commandButton value="Save" action="{!save}"/>


</apex:form>

<!--------------------------------------------------------------------------------------------------------->
</apex:page>

October 13, 2016
·
Answer
·
Like
0
·
Follow
2

SF_Guha
This is because the Pageblocktable columns are more and looks like each column is wider by default. The salesforce don't wrap the columns by the default stylesheets. So as a work around you can create HTML tables and set width for each column. The code would look something like the below.
<table > <table border="2" > <th style="font-size:12px; font-weight:bold;"> <td> column Header </td> <td> column Header</td> <td> column Header </td> <td> column Header</td> <td> column Header </td> <td> column Header</td> </th> <apex:repeat value="{!listname}" var="lst"> <tr style="font-size:11px;"> <td width="10%"> {!lst.API_NAME__c} </td> <td width="10%"> {!lst.API_NAME__c} </td> <td width="10%"> {!lst.API_NAME__c} </td> <td width="10%"> {!lst.API_NAME__c} </td> <td width="10%"> {!lst.API_NAME__c} </td> <td width="10%"> {!lst.API_NAME__c} </td> </tr> </apex:repeat> </table>

Please mark as best answer to help others if it solves your issue.

October 13, 2016
·
Like
0
·
Dislike
0

Staci
@Guha Anandh
Unfortunately once I made them input fields, the width was just as wide as my original :(

October 13, 2016
·
Like
0
·
Dislike
0

alsinan nazim
Hi Staci,

This Page block table is wider by default, that is why that shows the overflow. You can probably set the StandardStyleSheets to False and can write custom CSS so that you can overrride these current settings.

If you are using an HTML table instead, you can override this StandardStyleSheets (setting to False) and by writing custom CSS and make it as !IMPORTANT

Example:
<style> tr{ width:10% !important; max-width:20px !important; } td{ width:10% !important; max-width:20px !important; }

You can set the values precisely by inspecting every elements in your page and providing the values there.

Hope that helps,
Regards
Alsinan

October 13, 2016
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

VF Page section falls out of frame

You need to sign in to do that.