You need to sign in to do that
Don't have an account?
Maeze Ahlers
Remove margin/padding around visualforce page in lightning app
I have created multiple visualforce pages to go into lightning app builder (I have to do this instead of components because we have many users and are not ready to deploy domain name, so I cannot use lightning components yet). I'd like to expand the apex page to all corners of the alotted space that is given from the app and remove the name of the visualforce page.
When I inspect the page, I can move the visualforce page where I'd like it to move within the area using .slds-card__body.slds-card__body--inner and modifying the top-margin to -50px, however, it modifies every visualforce page in the app. When I add this class to the code of my visualforce page and modify the margins in the style it doesn't render. It is nested under an <article class> and I'm not sure how to adjust my class in the visualforce page to account for the article, which I believe is why it's not working. Below is a picture of how this looks:
This is how it looks now:
This is how I'd like it to look:
The other option I considered was creating a visualforce page with multiple pageblock sections however (although it's not pictured in this example), I need each section to display a separate opportunity list, and I could not find a way to do that using this method, but any suggestions are welcomed!
Thank you!!
When I inspect the page, I can move the visualforce page where I'd like it to move within the area using .slds-card__body.slds-card__body--inner and modifying the top-margin to -50px, however, it modifies every visualforce page in the app. When I add this class to the code of my visualforce page and modify the margins in the style it doesn't render. It is nested under an <article class> and I'm not sure how to adjust my class in the visualforce page to account for the article, which I believe is why it's not working. Below is a picture of how this looks:
This is how it looks now:
This is how I'd like it to look:
The other option I considered was creating a visualforce page with multiple pageblock sections however (although it's not pictured in this example), I need each section to display a separate opportunity list, and I could not find a way to do that using this method, but any suggestions are welcomed!
Thank you!!
<apex:page standardController="Opportunity" recordsetvar="opportunities" id="standopp" showHeader="false"> <div class="slds-card__body.slds-card__body--outer"> <div class=".slds-card__header.slds-grid" style="margin-left:-20px; margin-top:-50px;"> <apex:form title="form" id="form" style="zoom:75%; height:550px;width:100% showscroll:False"> <apex:pageblock id="firstpb" title="firstpb"> <apex:panelgrid columns="4" id="panelg" title="panelg"> <apex:outputlabel value="view:"/> <apex:selectlist value="{!filterId}" id="select1" title="select1" size="1"> <apex:selectOptions value="{!listviewoptions}"/> <apex:actionsupport event="onchange" rerender="oppsection"/> </apex:selectlist> </apex:panelgrid> <apex:pageblockbuttons > <apex:commandButton value="Save" action="{!save}"/> <apex:commandButton value="Quick Save" action="{!save}"/> </apex:pageblockbuttons> <apex:pageblocksection id="oppsection" showheader="true"> <apex:outputPanel style="overflow:auto;width:650px;height:250px"> <apex:repeat value="{!opportunities}" var="opp" id="rep"> <apex:pageblocksection id="oppsection2" showheader="true" title="{!opp.name} - {!opp.Billing_City_State__c}"> <apex:pageblocktable id="table" value="{!opp.name}" title="pbt1" columns="4" var="pbt" style="width:100px"> <apex:column headerValue="Information" style="width:100px" > <apex:inputField style="width:100px" value="{!opp.stageName}"/><br/> <apex:inputField style="width:100px" value="{!opp.LeadSource}"/> <br/><br/> <apex:inputField style="width:100px" value="{!opp.Priority__c}"/> </apex:column> <apex:column headerValue="Information" style="width:100px" > <apex:outputtext style="width:100px" styleclass="bold" value="Overview"></apex:outputtext><br/> <apex:inputField style="width:100px" value="{!opp.Company_Overview__c}" /> <br/> <apex:outputtext style="width:100px" styleclass="bold" value="Last Activity"></apex:outputtext><br/> <apex:inputField style="width:100px" value="{!opp.Last_Activity_Date__c}" /> <br/> <apex:outputtext style="width:100px" styleclass="bold" value="Next Activity"></apex:outputtext><br/> <apex:outputLink style="width:100px" value="/{!opp.Next_Activity_ID__c}">{!opp.Next_Activity_Due_Date__c}</apex:outputlink> <br/> <apex:outputtext style="width:100px" styleclass="bold" value="FollowUp"></apex:outputtext><br/> <apex:inputField style="width:100px" value="{!opp.Follow_Up_Date__c}" /> </apex:column> <apex:column headerValue="Inactive Stage" id="multi"> <apex:inputField style="zoom:75%" value="{!opp.Inactive_Stage__c}"/ > <apex:outputtext value="Corporate?"></apex:outputtext> <apex:inputField value="{!opp.Handled_From_Coorporate__c}"/> <apex:outputtext value="HQ:?"></apex:outputtext> <apex:inputField style="width:100px" value="{!opp.Headquarters__c}"/> <apex:outputtext value="Email?"></apex:outputtext> <apex:inputField value="{!opp.Email_Blast__c}"/> <apex:outputtext value="Locations"></apex:outputtext> <apex:inputField style="width:100px" value="{!opp.Number_of_Locations__c}"/> </apex:column> </apex:pageblocktable> </apex:pageblocksection> </apex:repeat> </apex:outputpanel> </apex:pageblocksection> </apex:pageblock> </apex:form> <style language="css"> .opportunityTab .tertiaryPalette, .individualPalette .opportunityBlock .tertiaryPalette, .layoutEdit .individualPalette .opportunityBlock .tertiaryPalette { background-color: #005f93; border-color: #005f93; width:650px; } .opportunityTab .secondaryPalette, .individualPalette .opportunityBlock .secondaryPalette { border-color: #005f93; } span.bold { font-weight:bold; } </style> </div> </div> </apex:page>
did you get anywhere with this?