0

I have developed a Visualforce page and I have put it in a force.com site. I have added the <apex:slds /> to my code to make it mobile responsive but it is mobile responsive only in the VF page and not in force.com site. By mobile responsive, what I mean is when you open Chrome and load the force.com site, the fields should adjust to the phone layout which is not happening at the moment. Can you please give me suggestions/recommendations on overcoming this issue?

VF Code:

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <head>
        <apex:slds /> 
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
        <title>SLDS ResponsiveDesign Visualforce Page in Salesforce Mobile</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <apex:slds />
    </head>
    <body>

        <div class="slds-scope" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

            <style>
                .mystyle {

                color: black;
                font-size: 18px;
                font-weight: bold;
                }
                body .bPageBlock .pbBody .red .pbSubheader{
                background-color:#585858;

                }
                body .bPageBlock .pbBody .grey .pbSubheader{
                background-color:#585858;

                }
                body .bPageBlock .pbBody .grey .pbSubheader h3{
                color:#FFFFFF;

                }

                .grey
                {
                background-color:white;
                }



            </style>


            <apex:form id="theform" >

                <apex:pageBlock id="section1"  >

                    <apex:outputPanel id="errmsg">
                        <apex:pageMessages />
                    </apex:outputPanel>




                    <div class = "mystyle">
                        Cleaning Activities
                    </div>


                    <apex:outputPanel styleClass="grey" layout="block">
                        <apex:pageBlockSection title="Login" collapsible="false"> 
                            <apex:inputField value="{!cle.Password__c}">
                                <apex:actionSupport event="onchange" action="{!assignPassword}"  reRender="CleaningSection" />
                            </apex:inputField>
                        </apex:pageBlockSection>
                    </apex:outputPanel>




                    <div align = "center">
                        <apex:commandButton styleClass="slds-button slds-button--brand" value="Retrieve Cleaning Activities" action="{!retrieve}"  /> 
                    </div>


                    <apex:outputPanel id="CleaningSection" styleClass="grey" layout="block">
                        <apex:pageBlockSection columns="2" title="Cleaning Activity" id="section1" collapsible="false">
                            <apex:inputField value="{!cle.Operation__c}" required="false"/>
                            <apex:inputField value="{!cle.Cleaning_Company__c}"   />
                            <apex:inputField value="{!cle.PTW_Number__c}"/> 
                            <apex:inputField value="{!cle.Water_Usage_in_litres__c}"/>
                            <apex:inputField value="{!cle.Date_of_Cleaning__c}"/>
                            <apex:inputField value="{!cle.Cleaning_End_Date__c}"/>
                            <apex:inputField value="{!cle.Dry_Cleaning__c}"/>
                            <apex:inputField value="{!cle.Full_Site_Cleaning__c}"/>
                            <apex:inputField value="{!cle.Specific_Size_Cleaned_kWp__c}"/> 
                            <apex:inputField value="{!cle.Status__c}"/>
                            <apex:inputField value="{!cle.URL_of_Photos_folder__c}"/>  <br/>
                            <apex:inputField value="{!cle.Start_Time__c}" type="time" /> 
                            <apex:inputField value="{!cle.End_Time__c}" type="time"/>
                            <apex:inputField value="{!cle.Number_of_Workers__c}"/>
                            <apex:inputField value="{!cle.Hours_to_Deduct__c}"/>


                        </apex:pageBlockSection> 
                    </apex:outputPanel>


                    <div align="center">
                        <apex:commandButton styleClass="slds-button slds-button--brand" value="Save Cleaning Activity" action="{!save1}"  >
                            <apex:param name="buttonId1" value="button1" assignTo="{!paramValue}"/>
                        </apex:commandButton>
                    </div>


                </apex:pageBlock>

                <apex:pageBlock id="section2">

                    <apex:outputPanel styleClass="grey" layout="block">
                        <apex:pageBlockSection columns="2" title="Permit to Work Number"  collapsible="false">
                            <apex:inputField value="{!ptw.Id}" />
                            <apex:inputField value="{!ptw.Cleaning_Activity__c}" />
                            <apex:inputField value="{!ptw.PTW_Number1__c}" required="false" />
                            <apex:inputField value="{!ptw.Number_of_Workers__c}"/>
                            <apex:inputField value="{!ptw.Date__c}"/>  
                            <apex:inputField value="{!ptw.Start_Time__c}" type="time"/>
                            <apex:inputField value="{!ptw.End_Time__c}" type="time"/>
                            <apex:inputField value="{!ptw.Hours_to_Deduct__c}"/>
                        </apex:pageBlockSection> 
                    </apex:outputPanel>

                    <div align="center">
                        <apex:commandButton styleClass="slds-button slds-button--brand" value="Save Permit to Work Number" action="{!save1}" reRender="errmsg">

                            <apex:param name="buttonId2" value="button2" assignTo="{!paramValue}"/>
                        </apex:commandButton>

                        <apex:commandButton styleClass="slds-button slds-button--brand" value="Reset PTW" action="{!refresh}" />

                    </div>

                </apex:pageBlock>


                <apex:pageBlock mode="inlineEdit" > 
                    <div style="width:800px; margin:0 auto;">
                        <apex:pageBlockButtons location="top" >
                            <apex:commandbutton value="Update" styleClass="slds-button slds-button--brand" action="{!saveInlineEdit}"/>
                        </apex:pageBlockButtons>
                    </div>


                    <apex:pageBlockTable value="{!clelist}" var="a" id="tableBlock" style="width:130%" rendered="true">
                        <apex:column headerValue="Ticket Number">
                            <apex:outputLink value="https://c.ap2.visual.force.com/apex/Record_detail_Vf_Page?id = {a.Cleaning_Activity__c}">{!a.Name}</apex:outputLink>
                        </apex:column>
                        <apex:column headerValue="Contractor">
                            <apex:outputField value="{!a.Cleaning_Company__c}"/>
                        </apex:column>
                        <apex:column headerValue="Number of Workers">
                            <apex:outputField value="{!a.Number_of_Workers__c}"/>
                        </apex:column>
                        <apex:column headerValue="Operation Name" value="{!a.Operation__c}"/>

                        <apex:column headerValue="Start Date" value="{!a.Date_of_Cleaning__c}"/>
                        <apex:column headerValue="End Date" value="{!a.Cleaning_End_Date__c}"/>
                        <apex:column headerValue="PTW Number" value="{!a.Permit_to_Work_Number__c}"/>
                    </apex:pageBlockTable> 


                </apex:pageBlock> 




            </apex:form>   

        </div>
    </body>
</html>
2
  • 1
    Please do not delete and repost your questions. If you have changes to make, use an edit on the original post. Reposting is not an appropriate way to get more attention on a question. – David Reed May 25 '20 at 3:50
  • Hi @DavidReed Noted. – Krishnamurthy May 25 '20 at 4:29
0

Please modify your page to use the SLDS Grid System. This will help you in building your page in mobile-first approach.

This page will provide you more details with a sample reference.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.