Apex Code Development You need to sign in to do that
Don't have an account?
Harsha Shri Make Visualforce page as responsive design
Hi All,
I have developed a VF page by using standard controller. I have alignment issue. Please see below image.
If you see above image Account name and produ order number are not in same line.
I want to make all elements in the above visualforce page as responsive desing. even I minimize screen also, I dont want to distract the fields.
Please help me how to make this as responsive
Thanks in Advance
I have developed a VF page by using standard controller. I have alignment issue. Please see below image.
If you see above image Account name and produ order number are not in same line.
I want to make all elements in the above visualforce page as responsive desing. even I minimize screen also, I dont want to distract the fields.
Please help me how to make this as responsive
<apex:page standardController="Account" showHeader="true">
<apex:form >
<apex:sectionHeader title="title1"/>
<apex:pageBlock title="title2" tabStyle="account">
<apex:pageBlockSection title="PBS2" collapsible="false" id="myPbSec2" columns="2">
<apex:outputField value="{!account.name}"/>
<apex:outputField value="{!account.description}"/>
<apex:outputPanel >
<span style="margin-left:102px"><apex:outputLabel value="Produ Order Number"/><span style="margin-left:18px"><apex:inputtext label="" id="ST"/>
<apex:commandButton value="Button1!" /></span></span>
</apex:outputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Thanks in Advance
To make VF page responsive, I suggest to use SLDS.
https://www.lightningdesignsystem.com/platforms/visualforce
Here is a kind of sample
<apex:page standardController="Account" showHeader="true" docType="html-5.0" > <apex:slds/> <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en"> <div class="slds-scope"> <apex:form > <apex:sectionHeader title="title1"/> <div id="divMainContainer" style="display:flex" class="slds-form--stacked slds-grid slds-wrap slds-grid--pull-padded slds-m-top--large"> <div class="slds-grid slds-wrap slds-grid--pull-padded" style="width:100%" > <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-1"> <div class="slds-grid slds-wrap slds-grid--pull-padded"> <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2"> <div class="slds-form-element slds-has-divider--bottom"> <label class="slds-form-element__label" for="Opportunity-Name">Name </label> <div class="slds-form-element__control"> <span class="slds-form-element__static">{!account.Name}</span> </div> </div> </div> <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2"> <div class="slds-form-element slds-has-divider--bottom"> <label class="slds-form-element__label" >Description </label> <div class="slds-form-element__control"> <span class="slds-form-element__static">{!account.description}</span> </div> </div> </div> </div> </div> <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-1"> <div class="slds-grid slds-wrap slds-grid--pull-padded"> <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2"> <label class="slds-form-element__label" >ST </label> <div class="slds-form-element__control"> <apex:input id="ST" styleClass="slds-input" /> </div> </div> <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2"> <label class="slds-form-element__label" > </label> <div class="slds-form-element__control"> <apex:commandButton value="GO" styleClass="slds-button slds-button--brand"/> </div> </div> </div> </div> </div> </div> </apex:form> </div> </html> </apex:page>Best Regards
Sampath
All Answers
Try below code
<apex:page standardController="Account" showHeader="true"> <apex:form> <apex:sectionHeader title="title1" /> <apex:pageBlock title="title2" tabStyle="account"> <apex:pageBlockButtons> <apex:commandButton action="{!save}" value="Button1" /> </apex:pageBlockButtons> <apex:pageBlockSection title="PBS2" collapsible="false" id="myPbSec2" columns="2"> <apex:pageBlockSectionItem> <apex:outputLabel value="Account Name" /> <apex:outputField value="{!account.name}" /> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem> <apex:outputLabel value="Account Description" /> <apex:outputField value="{!account.description}" /> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem> <apex:outputLabel value="Produ Order Number" /> <apex:inputtext label="" id="ST" /> </apex:pageBlockSectionItem> </apex:pageBlockSection> </apex:pageBlock> </apex:form> </apex:page>Thank you very much for your response.
As I swown in above image, I want button should be next to inputtext. Can you please help me in that
To make VF page responsive, I suggest to use SLDS.
https://www.lightningdesignsystem.com/platforms/visualforce
Here is a kind of sample
<apex:page standardController="Account" showHeader="true" docType="html-5.0" > <apex:slds/> <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en"> <div class="slds-scope"> <apex:form > <apex:sectionHeader title="title1"/> <div id="divMainContainer" style="display:flex" class="slds-form--stacked slds-grid slds-wrap slds-grid--pull-padded slds-m-top--large"> <div class="slds-grid slds-wrap slds-grid--pull-padded" style="width:100%" > <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-1"> <div class="slds-grid slds-wrap slds-grid--pull-padded"> <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2"> <div class="slds-form-element slds-has-divider--bottom"> <label class="slds-form-element__label" for="Opportunity-Name">Name </label> <div class="slds-form-element__control"> <span class="slds-form-element__static">{!account.Name}</span> </div> </div> </div> <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2"> <div class="slds-form-element slds-has-divider--bottom"> <label class="slds-form-element__label" >Description </label> <div class="slds-form-element__control"> <span class="slds-form-element__static">{!account.description}</span> </div> </div> </div> </div> </div> <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-1"> <div class="slds-grid slds-wrap slds-grid--pull-padded"> <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2"> <label class="slds-form-element__label" >ST </label> <div class="slds-form-element__control"> <apex:input id="ST" styleClass="slds-input" /> </div> </div> <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-2"> <label class="slds-form-element__label" > </label> <div class="slds-form-element__control"> <apex:commandButton value="GO" styleClass="slds-button slds-button--brand"/> </div> </div> </div> </div> </div> </div> </apex:form> </div> </html> </apex:page>Best Regards
Sampath