+ Start a Discussion
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student 

HomePage Component cut off when sidebar is extended please help

Hi there,

I have created a visualforce home page component. This works well, except for the odd computer screen, where the right hand side of the component is cut off. In order to see the full component, the sidebar has to be minimised. How do I make it so that the component will resize properly so that it fits fully onto the page when i extend or reduce the sidebar.

Please help, any help or tips would be very much appreciated. Visualforce page below:
 
<apex:page sidebar="true" docType="html-5.0" controller="HomePageAccountView" tabStyle="account" >  

    <script>
    $j = jQuery.noConflict();
 var newWin=null;
 function openLookupPopup(AccountID)
 {
  var url="/apex/DestinyAccount?id=" + AccountID;
    $jnewWin=window.open(url);
  if (window.focus)
  {
     $jnewWin.focus();
  }
    
     return false;
    }
      
</script>

<style>  
     .glow{  
        animation: flashBg 0.9s;  
        -webkit-animation: flashBg 0.9s alternate infinite;  
     }  
     @keyframes flashBg  
     {  
       from {  
           border: 3px solid #ff6161;  
          }  
       to {  
           border: 3px solid #ffd324;  
         }  
     }  
     @-webkit-keyframes flashBg /* Safari and Chrome */  
     {  
       from {  
           border: 3px solid #ff6161;  
          }  
       to {  
           border: 3px solid #ffd324;  
           box-shadow: 0px 0px 50px 3px #e14f1c;  
         }  
     }  
   </style>  
   <style>
.activeTab {background-color: #892034; color:White;
background-image:none;font-size:160%;border-radius:20px;}
.inactiveTab { background-color: #428BCA; color:white;
background-image:none;font-size:160%;border-radius:20px;}
.background { background-color: white; }
.rich-tabhdr-side-border { background-image: none; }
.rich-tabhdr-side-cell { border-top: none; }
.inner {
    height:160px;
    overflow:auto;
}
.header {
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
</style>


 <vs:importvisualstrap />  
<vs:visualstrapblock >  
<apex:tabPanel switchType="client" 
id="AccountTabPanel" tabClass="activeTab"
inactiveTabClass="inactiveTab" > 



<apex:tab labelWidth="%" style="background-color:white;border-bottom: none;border-left: none;border-right: none;" label="Prospective Client Summary" name="SummaryDetails" id="tabSummary" >
<vs:panel title="Prospective Client Summary" type="primary">  
<vs:row >  

<vs:column type="col-md-4"> 
<div style="block"  class="{!if(AccountsInquiry.size>5,"glow","none")}"   id="contentToToggle" ><vs:well style="text-align:center;">  
<vs:glyph icon="phone-alt" style="font-size:40px"/>&nbsp;
<span style="font-size:54px">
{!AccountsInquiry.size}
</span>  
<p class="text-muted">Outstanding Inquiry</p>  
</vs:well>  
</div>
</vs:column>  

 
<vs:column type="col-md-4">  
 <div style="block"     id="Glow2" >
<vs:well style="text-align:center;">  
<vs:glyph icon="book" style="font-size:40px"/>&nbsp;<span style="font-size:54px">{!AccountsPresentation.size}</span>  
<p class="text-muted">Presentation Booked</p>  
</vs:well> 
</div>
</vs:column>  

<vs:column type="col-md-4"> 
<div  id="Glow3">     
<vs:well style="text-align:center;">  
<vs:glyph icon="earphone" style="font-size:40px"/>&nbsp;
<span style="font-size:54px">{!AccountsFollowUp.size}</span>  
<p class="text-muted">Service Decision Follow-Up</p>  
 </vs:well>  
 </div>  
</vs:column>  
 
 <!--
<vs:column type="col-md-3">  
 <div style="block"  class="{!if(AccountsPresentation.size>5,"glow","none")}"   id="Glow2" >
<vs:well style="text-align:center;">  
<vs:glyph icon="book" style="font-size:40px"/>&nbsp;<span style="font-size:54px">{!AccountsPresentation.size}</span>  
<p class="text-muted">New Account List</p>  
</vs:well> 
</div>
</vs:column>  
-->


</vs:row> 
 </vs:panel> 
</apex:tab>

<apex:tab labelWidth="25%" style="background-color:white;border-bottom: none;border-left: none;border-right: none;" label="Outstanding Inquiry" name="EnquiryDetails" id="tabdetails" >
<vs:panel title="Outstanding Inquiry" type="primary">  
<div  class="{!if(AccountsInquiry.size>5,"inner","none")}"   id="FixedHeader">  
<apex:dataTable value="{!AccountsInquiry}" var="AccInqu" headerClass="Header" styleClass="table table-condensed table-hover table-bordered"  > 
<apex:column headerValue="Name"  >  
<a href="#" onclick="openLookupPopup('{!AccInqu.Id}'); return false" >{!AccInqu.name}</a>
</apex:column>  
<apex:column value="{!AccInqu.Account_Status__c }" headerValue="Status" />  
<apex:column value="{!AccInqu.Account_Inquiry_Date__c}"  headerValue="Inquiry Date" headerClass="clsCenter"/>  
<apex:column value="{!AccInqu.Initial_ContactSource__c}"  headerValue="Contact Source"/>  
<apex:column value="{!AccInqu.Initial_Destiny_Lead_Rating_c__c}"  headerValue="Lead Rating" />  
<apex:column value="{!AccInqu.Office__c}" rendered="{!($Profile.Name=='Destiny Director')||($Profile.Name=='Financial Controller')||($Profile.Name=='Head Office Support')||($Profile.Name=='System Administrator')}" headerValue="Office"/> 
</apex:dataTable> 
</div>   
<vs:alert rendered="{!AccountsInquiry.empty}" type="warning" style="text-align:center">  
<vs:glyph icon="exclamation-sign"/> No records to display  
</vs:alert>  
</vs:panel> 
</apex:tab>


<apex:tab labelWidth="25%" style="background-color:white;border-bottom: none;border-left: none;border-right: none;" label="Presentation Booked" name="Presentation Booked" id="tabPresentationBooked" >
<vs:panel title="Presentation Booked" type="primary">
<div class="{!if(AccountsPresentation.size>5,"inner","none")}"   id="FixedHeader">  
 <apex:dataTable value="{!AccountsPresentation}" var="accPres" styleClass="table table-condensed table-hover table-bordered" >  
<apex:column headerValue="Name">  
<a href="#" onclick="openLookupPopup('{!accPres.Id}'); return false" >{!accPres.name}</a>
</apex:column>  
<apex:column value="{!accPres.Account_Status__c}" headerValue="Status"/> 
<apex:column value="{!accPres.Initial_Presentation_Date__c}" headerValue="Initial Appointment Start"/>  
<apex:column value="{!accPres.Account_Inquiry_Date__c}" headerValue="Inquiry Date"/>  
<apex:column value="{!accPres.Office__c}" rendered="{!($Profile.Name=='Destiny Director')||($Profile.Name=='Financial Controller')||($Profile.Name=='Head Office Support')||($Profile.Name=='System Administrator')}" headerValue="Office"/>   
</apex:dataTable> 
</div>   
<!--
<apex:pageblock> 
<apex:pageblockTable value="{!AccountsPresentation}" var="accPres" styleClass="table table-condensed table-hover table-bordered" >  
<apex:column headerValue="Name">  
<a href="#" onclick="openLookupPopup('{!accPres.Id}'); return false" >{!accPres.name}</a>
</apex:column>  
<apex:column value="{!accPres.Account_Status__c}" headerValue="Status"/> 
<apex:column value="{!accPres.Account_Inquiry_Date__c}" headerValue="Enquired"/>  
<apex:column value="{!accPres.Office__c}" headerValue="Office"/>   
</apex:pageblockTable>
</apex:pageblock> 
-->
<vs:alert rendered="{!AccountsPresentation.empty}" type="warning" style="text-align:center">  
<vs:glyph icon="exclamation-sign"/> No records to display  
</vs:alert>      
</vs:panel> 
</apex:tab>


<apex:tab labelWidth="25%" label="Service Decision Follow-Up" style="background-color:white;border-bottom: none;border-left: none;border-right: none;" name="Account Follow-Up" id="tabAccountFollow" >
<vs:panel title="Service Decision Follow-Up" type="primary"> 
<div class="{!if(AccountsFollowUp.size>5,"inner","none")}"   id="FixedHeader">  
<apex:dataTable value="{!AccountsFollowUp}" var="AccFol" styleClass="table table-condensed table-hover table-bordered">  
<apex:column headerValue="Name">  
<a href="#" onclick="openLookupPopup('{!AccFol.Id}'); return false" >{!AccFol.name}</a>
</apex:column>  
<apex:column value="{!AccFol.Account_Status__c}" headerValue="Status"/>  
 <apex:column value="{!AccFol.Initial_Presentation_Date__c}" headerValue="Initial Appointment Start"/>  
 <!--
  <apex:column value="{!AccFol.Account_Inquiry_Date__c}" headerValue="Follow Up Date"/>  
  -->
<apex:column value="{!AccFol.Office__c}" rendered="{!($Profile.Name=='Destiny Director')||($Profile.Name=='Financial Controller')||($Profile.Name=='Head Office Support')||($Profile.Name=='System Administrator')}" headerValue="Office"/> 
</apex:dataTable>  
</div>  
<vs:alert rendered="{!AccountsFollowUp.empty}" type="warning" style="text-align:center">  
<vs:glyph icon="exclamation-sign"/> No records to display  
</vs:alert>  
</vs:panel>  
</apex:tab>



</apex:tabPanel>  
</vs:visualstrapblock>  
</apex:page>

 
Ashish_Sharma_DEVSFDCAshish_Sharma_DEVSFDC
Hi ,

Here are the possible solutions.

1. Try with Component Position while creating it.
2. Put it in a iFrame and use height="100px" and scrollbars="false".

Let us know if it helps you.
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
Hi, thank you so much for your reply. I am nopt sure what you mean by component position and I have never used an iframe but am wary of them. I think i would go down option 1. Would you perhaps be able to explain what you mean by component position while creating it? Thank you, Mikie