+ Start a Discussion
Jyosi jyosiJyosi jyosi 

To design the visualforce page that fits all IOS device in Salesforce one APP

Hello All,
I have used google simulator and trying to work in salesforce one app.
I was able to keep design for iphone 6+,but when i simuate in iphone 6/5 tha pageblocktable is not fiting the whole screen .

below is pageblock code which is used to design for 6+
   <apex:outputpanel style="overflow:scroll;height:250px;" layout="block">
        <!-- Begin Order Line Item Information  -->
          <div class="bootstrap" style="padding: 10px;">
         <apex:variable value="{!0}" var="index" />  
         
         
        <apex:pageBlockTable value="{!SampleLineItemWrapperList}" var="sliExt" id="table1"  columnsWidth="style:padding: 10px;">
          
         <apex:column headerValue="No"  style="padding:.5px;width: 90px">
         <apex:outputtext value="{!sliExt.counterWrap}" style="padding:.5px;width: 90px" />
         </apex:column>
       
       <apex:column headerValue="Product"  width="25px" rendered="{!IF(sliExt.sample_Line_Item.Id=null,true,false)}">
       <apex:inputfield value="{!sliExt.sample_Line_Item.Product_No__c}" style="width: 70px;"  onkeypress="return handleEnter(this, event)">
          <apex:actionSupport event="onchange" action="{!BOMExplosion}" rerender="table1" onbeforedomupdate="elementFocus = document.activeElement;"
                                            >
              <apex:param name="T1" value="{!sliExt.counterWrap}" assignTo="{!selectedLineItemIndex}" />
           </apex:actionSupport>
           </apex:inputfield>
        </apex:column>
             
       <apex:column headerValue="Product"  style="padding:.5px;width: 0px" rendered="{!IF(sliExt.sample_Line_Item.Id!=null,true,false)}">
       <apex:outputField value="{!sliExt.sample_Line_Item.Product_No__c}"  style="padding:.5px;width:90px"/>
       </apex:column>
             
       <apex:column headerValue="UOM" style="padding:.5px;width: 40px" rendered="{!IF(sXXiExt.XX.Id=null,true,false)}">
        <apex:inputfield value="{!XX.XX.XX}" style="padding:.5px;width:40px"  id="T1" onkeypress="return handleEnter(this, event)"/>
        </apex:column>
             
        <apex:column headerValue="UOM" width="25px" rendered="{!IF(XX.XX.Id!=null,true,false)}">
         <apex:outputField value="{!XX.XX.XX}" style="width: 10px;" />
        </apex:column>
         
         <apex:column headerValue="Quantity" width="25px">
            <apex:inputfield value="{!XX.XX.XX}" style="width: 40px;"  onkeypress="return handleEnter(this, event)"/>
         </apex:column>
       
          <apex:column headerValue="Avail Qty" style="padding:.5px;width: 90px">
            <apex:outputfield value="{!XX.XX.XX}"  />
         </apex:column>
         
         <apex:column headerValue="Qty Shipped" style="padding:.5px;width: 90px">
            <apex:outputfield value="{!XX.XX.XX}" style="padding:.5px;width: 40px"  />
         </apex:column>
         
          <apex:column headerValue="Shiping Date" style="padding:.5px;width: 90px" >
            <apex:outputfield value="{!XX.XX.XX}" style="padding:.5px;width: 40px"  />
         </apex:column>
         
         
         <apex:column headerValue="Reason for Rejection" style="padding:.5px;width: 90px" >
            <apex:inputfield value="{!XX.XXX.XXX}" style="padding:.5px;width: 90px"  onkeypress="return handleEnter(this, event)"/>
         </apex:column>
         
         
         <apex:column headerValue=""  style="display:none;visibility:hidden;padding:.5px;width:1px">
            <apex:inputfield value="{!sliExt.sample_Line_Item.Country__c}" style="padding:.5px;width: 90px" />
         </apex:column>
          
         </apex:pageBlockTable>
            </div>
            
     <apex:commandButton value="Add5Row" action="{!addRow}" />
  </apex:outputpanel>    


Thaks for the help.

Regards,
Jyo