You need to sign in to do that
Don't have an account?
Jyosi 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
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