You need to sign in to do that
Don't have an account?
Developer.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:
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"/> <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"/> <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"/> <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"/> <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>
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.