function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Aurora Ganguly 10Aurora Ganguly 10 

oppurtunity vf page

hi All,
I have made a oppurtunity page as vf page , but it is not responsive in simulator, all the fields are not aligned, 

just see the effect.
i have bootstrap also,User-added image

plz reply ,
Best Answer chosen by Aurora Ganguly 10
vijayabhaskarareddyvijayabhaskarareddy
try once with thsese  cdns 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

 

All Answers

vijayabhaskarareddyvijayabhaskarareddy
Hi @Aurora 
could  u pls post your code here, it will help u to resolve the issue
Regards
vijay
testingsfdc77@gmail.com
Aurora Ganguly 10Aurora Ganguly 10
<apex:page applyBodyTag="true" applyHtmlTag="true"  showHeader="false" standardController="Opportunity__c" standardStylesheets="false" extensions="Ctr_OpportunityController" >
    <head>
  <title>Premiere Irrigation</title>
  <!-- meta -->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=maximum width, initial-scale=1, user-scalable=no"/>

    <!-- css -->
    <apex:stylesheet value="{!URLFOR($Resource.main, 'main/css/bootstrap.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.asset, 'asset/css/bootstrap.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.main, 'main/css/bootstrap-theme.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.main, 'main/css/font-awesome.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.main, 'main/css/main.css')}"/>
    

    <!-- google font -->
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Kreon:300,400,700'/>
    
    <!-- js -->
    <apex:stylesheet value="{!URLFOR($Resource.main, 'main/js/bootstrap.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.main, 'main/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js')}"/>
    </head>
    
    <apex:form >
        <apex:pageMessages ></apex:pageMessages>
       <!-- <apex:sectionHeader subtitle="opportunity Edit" title="New Opportunity" />-->
       
        <apex:pageBlock title="Opportunity Edit" id="pb" mode="Edit" >
            <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!Save}" />
                <apex:commandButton value="Cancel" action="{!Cancel}" />
            </apex:pageBlockButtons>           
            <apex:pageBlockSection title="Opprtunity Information" >
            <apex:inputField value="{!op.Name}" required="true"  />
             <apex:inputField value="{!op.State_Name__c}" />
                <apex:inputField value="{!op.Farmer_Registration_completed__c}" />
                <apex:inputField value="{!op.Name_of_Subsidy_Scheme__c}" />
                <apex:inputField value="{!op.Type_of_MIS__c}" />
                <apex:inputField value="{!op.Stage__c}" />
                <apex:inputField value="{!op.Department_Name__c}" />
            </apex:pageBlockSection>
            <apex:actionRegion >
                <apex:outputPanel id="block">
                    <!--<apex:panelGrid width="100%" columns="3" title="Survey ,Design Details">-->
                        <apex:pageBlockSection title="Survey Details" id="pbs2" columns="1">
                            <apex:inputField value="{!op.Survey_Done__c}">
                                <apex:actionSupport event="onchange" rerender="block" />
                            </apex:inputField>                          
                            <apex:inputField value="{!op.If_Yes_Date_of_Survey__c}" rendered="{!(op.Survey_Done__c='Yes')}"/>               
                            <apex:inputField value="{!op.Type_of_survey__c}" rendered="{!(op.Survey_Done__c='Yes')}" />                
                            <apex:inputField value="{!op.Date_of_Survey_report_sent_for_Auto_CAD__c }" rendered="{!(op.Survey_Done__c='Yes')}" />                
                            <apex:inputField value="{!op.If_NO_reason_for_not_doing_survey__c}" rendered="{!(op.Survey_Done__c='No')}" />                
                        </apex:pageBlockSection>
                        <apex:pageBlockSection title="Design" columns="1" >
                            <apex:inputField value="{!op.Design_Done__c}" >
                                <apex:actionSupport event="onchange" rerender="block" />
                            </apex:inputField>
                            <apex:inputField value="{!op.If_Yes_Date_of_design__c}" rendered="{!(op.Design_Done__c='Yes')}" />
                        </apex:pageBlockSection>
                        <apex:pageBlockSection title="BOQ" columns="1">
                            <apex:inputField value="{!op.BOQ_prepared__c}" >
                                <apex:actionSupport event="onchange" rerender="block" />
                            </apex:inputField>
                            <apex:inputField value="{!op.BOQ_Date__c}" rendered="{!(op.BOQ_prepared__c='Yes')}"  />
                            <apex:inputField value="{!op.BOQ_NO__c}" rendered="{!(op.BOQ_prepared__c='Yes')}" />
                        </apex:pageBlockSection>
                    <!--</apex:panelGrid>-->                    
            <apex:pageBlockSection title="Dealer Information" id="pbs6">
                <apex:inputField value="{!op.Name_of_Dealer_Attached__c}" />
                <apex:inputField value="{!op.Contact_person_Dealer__c}" />
                <apex:inputField value="{!op.Mobile_No__c}" />
                <apex:inputField value="{!op.Farmer_share_collected__c}">
                    <apex:actionSupport event="onchange" rerender="pbs6" />
                </apex:inputfield>
                <apex:inputField value="{!op.Procceding_Work_order_Pre_sanctions_Date__c}" />
                <apex:inputField value="{!op.If_YES__c}" rendered="{!(op.Farmer_share_collected__c='Yes')}" />
                <apex:inputField value="{!op.Collection_of_Advance_Value__c}" rendered="{!(op.Farmer_share_collected__c='paid')}"  />
                <apex:inputField value="{!op.Submission_of_FS_along_with_Documents_to__c}" />
                <apex:inputField value="{!op.Procceding_work_order_presanction_No__c}" />
                <apex:inputField value="{!op.If_Collection_of_Advance__c}">
                                        <apex:actionSupport event="onchange" rerender="pbs6" />

                                  </apex:inputField>                    
  
                <apex:inputField value="{!op.Procceding_Work_order_Presanctions_Value__c}" />
                <apex:inputField value="{!op.Collection_of_Advance_Date__c}" /> 
        </apex:pageBlockSection>
            <apex:pageBlockSection title="Required CheckList" id="pbs4">
                <apex:inputField value="{!op.Supply__c}" />
                <apex:inputField value="{!op.Uploading_done__c}" >
                    <apex:actionSupport event="onchange" rerender="pbs4" />
                </apex:inputField>                    
                <apex:inputField value="{!op.Installation_Done__c}" >
                    <apex:actionSupport event="onchange" rerender="pbs4" />
                </apex:inputField>
                <apex:inputField value="{!op.Uploading_date__c}" rendered="{!(op.Uploading_done__c='Yes')}"/>
                <apex:inputField value="{!op.Installation_Date__c}" rendered="{!(op.Installation_Done__c='Yes')}"/>
                <apex:inputField value="{!op.Receipt_of_50_payment_Date__c}" rendered="{!(op.Installation_Done__c='Yes')}"/>
                <apex:inputField value="{!op.If_NO_Reason_for_delay_Why_Open__c}" rendered="{!(op.Inspection_Done__c='No')}" />
                <apex:inputField value="{!op.Receipt_of_50_payment_Amount__c}" rendered="{!(op.Uploading_done__c='Yes')}"/>
                <apex:inputField value="{!op.Inspection_Done__c}" >
                    <apex:actionSupport event="onchange" rerender="pbs4" />
                </apex:inputField>
                <apex:inputField value="{!op.If_NOT_uploaded_Reason_for_delay_Why__c}" rendered="{!(op.Uploading_done__c='No')}" />
                <apex:inputField value="{!op.Receipt_of_40_payment_Date__c}" rendered="{!(op.Inspection_Done__c='Yes')}"/> 
                <apex:inputField value="{!op.Retention_Date__c}" />
                <apex:inputField value="{!op.Receipt_of_40_payment_Amount__c}" rendered="{!(op.Inspection_Done__c='Yes')}"/>
                <apex:inputField value="{!op.Retention_Amount__c}" />
                <apex:inputField value="{!op.If_NO_Reason_for_the_delay_Why_Open__c}" rendered="{!(op.Installation_Done__c='No')}" />
            </apex:pageBlockSection>
                </apex:outputPanel>
                            </apex:actionRegion>

        </apex:pageBlock>
    </apex:form>
</apex:page>
Aurora Ganguly 10Aurora Ganguly 10
Thanks,
here is the code, when am doing preview of the page , it is ok , wide view, but when am moving to the developer tools and viewing in mobile view say GalaxyS5 etc, at that time it not coming . same for the simulator it is not in that screen , the scroll is coming ..
vijayabhaskarareddyvijayabhaskarareddy
HI@ Aurora

you need to apply the bootstrap classes
See the sample code below
  
<apex:page >
<head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
        <style>
           .red{
            color:red;
            }
        .form-area
            {
            background-color: #FAFAFA;
            padding: 10px 40px 60px;
                margin: 10px 0px 60px;
            border: 1px solid GREY;
            }
        </style>
        
        <script>
       j$ = jQuery.noConflict();
        
         j$(document).ready(function(){ 
        alert("test");
     j$('#characterLeft').text('140 characters left');
     j$('#message').keydown(function () {
        var max = 140;
        var len =  j$(this).val().length;
        if (len >= max) {
             j$('#characterLeft').text('You have reached the limit');
            j$('#characterLeft').addClass('red');
            j$('#btnSubmit').addClass('disabled');            
        } 
        else {
            var ch = max - len;
            j$('#characterLeft').text(ch + ' characters left');
           j$('#btnSubmit').removeClass('disabled');
            j$('#characterLeft').removeClass('red');            
        }
    });    
});

        </script>
        
    </head>
     <apex:form >
    <div class="container">
<div class="col-md-5">
    <div class="form-area">  
       
        <br style="clear:both"/>
                    <h3 style="margin-bottom: 25px; text-align: center;">Contact Form</h3>
                    <div class="form-group">
                       <input type="text" class="form-control" id="name" name="name" placeholder="Name" required="true"/> 
                    </div>
                           
                    <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i></span>
                      <input id="email" name="email" class="form-control" placeholder="Inserici email@" required="" type="text"/>
                    </div>   
                       
                    </div>
                    
                             
        
                    <div class="form-group">
                       <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span>
              <input id="tel" name="tel" class="form-control" placeholder="Phone Number" required="" type="text"/>
            </div> 
                    </div> 
                    <div class="form-group">
                       <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required="true"/> 
                    </div>
                    <div class="form-group">
                    <textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
                     <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>                   
                    </div>
            
                <center> <button type="button" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button> </center>

    </div>
</div>
</div>
        </apex:form>
</apex:page>
Regards
vijay
testingsfdc77@gmail.com
 
Aurora Ganguly 10Aurora Ganguly 10
thanks vijay ,
I applied ur code, the first portion and it became responsive , when i am viewing in the deveolper tools in any mobile view, but when am opening the sandbox simulator the scroll is there, i need to move left and right, so in that scenario is it possible to make it static ,
Aurora Ganguly 10Aurora Ganguly 10
User-added imagethis is the simluator view, see the scroll is there, can it fixed so that it became static
vijayabhaskarareddyvijayabhaskarareddy
Hi @ Aurora
 i think you did't apply properly

regards
vijay
 
vijayabhaskarareddyvijayabhaskarareddy
Hi @ Aurora
sample  code

  
<apex:page standardController="Account" tabStyle="Account" showHeader="false" sidebar="false">

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
  <apex:form >  
    <div class="container">
        <h2>Form Inputs</h2>
        <div class="form-group">
            <label class="control-label col-sm-2" for="email">name:</label>
            <div class="col-sm-10">
               <apex:inputField value="{!Account.name}" styleClass="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="email">name:</label>
            <div class="col-sm-10">
               <apex:inputField value="{!Account.name}" styleClass="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="email">name:</label>
            <div class="col-sm-10">
               <apex:inputField value="{!Account.name}" styleClass="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="email">name:</label>
            <div class="col-sm-10">
               <apex:inputField value="{!Account.name}" styleClass="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="email">name:</label>
            <div class="col-sm-10">
               <apex:inputField value="{!Account.name}" styleClass="form-control"/>
            </div>
        </div>
       <br/> 
        <div class="form-group">
            <label class="control-label col-sm-2" for="pwd">Type:</label>
            <div class="col-sm-10">
                <apex:inputField value="{!Account.type}" styleClass="form-control"/>
            </div>
            <div class="form-group">
            <label class="control-label col-sm-2" for="email">name:</label>
            <div class="col-sm-10">
               <apex:inputField value="{!Account.name}" styleClass="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="email">name:</label>
            <div class="col-sm-10">
               <apex:inputField value="{!Account.name}" styleClass="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="email">name:</label>
            <div class="col-sm-10">
               <apex:inputField value="{!Account.name}" styleClass="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="email">name:</label>     
 
 
            <div class="col-sm-10">
               <apex:inputField value="{!Account.name}" styleClass="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="email">name:</label>
            <div class="col-sm-10">
               <apex:inputField value="{!Account.name}" styleClass="form-control"/>
            </div>
        </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Submit</button>
            </div>
        </div>
    </div>
</apex:form>  
</apex:page>
Regards
vijay
testingsfdc77@gmail.com
 
Aurora Ganguly 10Aurora Ganguly 10
Hi  Vijay,
before the form tag starts, i.e till closing of head tag i applied ,  i.e from line number 2 to 44 I applied, 
only .. 
the thing is in simulator only it is not coming . 
vijayabhaskarareddyvijayabhaskarareddy
try once with thsese  cdns 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

 
This was selected as the best answer
Aurora Ganguly 10Aurora Ganguly 10
Thanks vijay ,
it worked ,
thanks