Apex Code Development You need to sign in to do that
Don't have an account?
Lokeswara Reddy How to set vf page width
Hi,
Need help in aligning the VF page set to window, when I try to reduce the coulmns width I do not see any change in the page width.
VF page code,
<apex:page controller="ProductSearch" action="{!loadData}" tabstyle="Opportunity" docType="html-5.0">
<apex:form >
<apex:sectionHeader title="Choose Price Book for" subtitle="{!OptyName}" rendered="{!showPB}">
Select a price book for this opportunity. You can add products only from a single price book. Changing a selected price book will delete all existing products from this opportunity.
<p>Choose a price book that contains products with the same currency as the opportunity. If no products are available for the chosen currency, ask your administrator to create them.</p>
</apex:sectionHeader>
<apex:pageblock id="CP" title="Choose Price Book for: {!OptyName}" rendered="{!showPB}">
<apex:pageBlockSection collapsible="false">
<apex:selectList title="Price Book" label="Price Book" value="{!selectedPB}" size="1">
<apex:selectOptions value="{!PBList}"/>
</apex:selectList>
</apex:pageBlockSection>
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="Save" style="width:50px" action="{!savePB}"/>
<apex:commandButton value="Cancel" style="width:50px" action="{!cancel}"/>
</apex:pageBlockButtons>
</apex:pageblock>
<apex:pageBlock title="Product Search" id="PS1" rendered="{!showSearhBlock}">
<apex:pageBlockSection >
<apex:selectList label="Product Group:" value="{!selectedPG}" multiselect="false" size="1">
<apex:actionsupport event="onchange" action="{!getProductGroup}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!BGList}" />
</apex:selectList>
<!--<apex:selectList label="Product Name:" value="{!selectedName}" multiselect="false" size="1">
<apex:actionsupport event="onchange" action="{!getProductName}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!NameList}" />
</apex:selectList> -->
<apex:selectList label="Item Type:" value="{!selectedItemType}" multiselect="false" size="1">
<apex:actionsupport event="onchange" action="{!getItemType}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!itemTypeList}" />
</apex:selectList>
<apex:selectList label="Model Series:" value="{!selectedmodel}" multiselect="false" size="1">
<apex:actionsupport event="onchange" action="{!getModelSeries}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!modelSeriesList}" />
</apex:selectList>
<!--<apex:selectList label="Product Description:" value="{!selectedDes}" multiselect="false" size="1">
<apex:selectOptions value="{!DesList}" />
</apex:selectList> -->
<!-- <apex:selectList label="Life Cycle:" value="{!selectedLC}" multiselect="true" size="3">
<apex:actionsupport event="onchange" action="{!getLieCycle}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!LCList }" />
</apex:selectList> -->
<apex:selectCheckboxes value="{!selectedLC1}" label="Life Cycle:">
<apex:actionsupport event="onchange" action="{!getLieCycle}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!LCList1}"/>
</apex:selectCheckboxes>
<apex:inputText label="Full Product Search" value="{!productSearch}" size="75"/>
<apex:actionregion >
<apex:commandButton title="Search on Search" value="Search Within Results" action="{!SearchOnSearch}" style="width:130px"/>
<apex:commandButton title="Search" value="Full Search" action="{!FullProductSearch}" style="width:100px"/>
</apex:actionregion>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageBlock rendered="{!showSearchPB}" id="SR">
<!--
<apex:pageBlockButtons >
<apex:commandButton value="Select" style="width:75px" action="{!getSelectedRows}"/>
<apex:commandButton value="Cancel" style="width:75px" action="{!cancel}"/>
</apex:pageBlockButtons> -->
<apex:pageBlockSection title="Search Results">
<apex:dataTable value="{!products}" var="wrapper" cellpadding="4" border="1" style="width:1250px">
<apex:column style="width:20px">
<!-- <apex:facet name="header"> <apex:inputCheckbox >
<apex:actionSupport event="onclick" action="{!GetSelected}" onsubmit="checkAll(this)"/>
</apex:inputCheckbox></apex:facet> -->
<apex:inputCheckbox id="checkedone" value="{!wrapper.selected}">
<apex:actionSupport event="onclick" action="{!GetSelected}" rerender="SP"/>
</apex:inputCheckbox></apex:column>
<apex:column headerValue="Product Name" value="{!wrapper.prod.Model_Description_Formula__c}" style="width:290px"/>
<apex:column headerValue="Product Code" value="{!wrapper.prod.ProductCode}" style="width:115px"/>
<apex:column headerValue="Model Series" value="{!wrapper.prod.Model_Series__c}" style="width:115px"/>
<apex:column headerValue="Product Group" value="{!wrapper.prod.Family}" style="width:140px"/>
<apex:column headerValue="Item Type" value="{!wrapper.prod.CBS_Item_Type_Description__c}" style="width:140px"/>
</apex:dataTable>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageBlock rendered="{!showSearchPB}" id="SP">
<apex:pageBlockButtons rendered="{!showButtons}">
<apex:commandButton value="Select" style="width:75px" action="{!getSelectedRows}"/>
<apex:commandButton value="Cancel" style="width:75px" action="{!cancel}"/>
</apex:pageBlockButtons>
<apex:variable value="{!0}" var="rowNum"/>
<apex:pageBlockSection title="Selected Products">
<apex:dataTable value="{!selectedSearchProducts}" var="wrapper" cellpadding="4" border="1" style="width:1250px">
<apex:column style="width:20px">
<!-- <apex:facet name="header"> <apex:inputCheckbox >
<apex:actionSupport event="onclick" action="{!GetSelected}" onsubmit="checkAll(this)"/>
</apex:inputCheckbox></apex:facet> -->
<apex:commandLink value="Remove" style="color:blue" action="{!RemoveSelected}" reRender="SP">
<apex:param value="{!rowNum}" name="rowToRemove" assignTo="{!rowToRemove}"/>
</apex:commandLink>
<apex:variable var="rowNum" value="{!rowNum + 1}"/>
<!-- <apex:inputCheckbox id="checkedone" value="{!wrapper.selected}">
</apex:inputCheckbox> --> </apex:column>
<apex:column headerValue="Product Name" value="{!wrapper.productName}" style="width:290px"/>
<apex:column headerValue="Product Code" value="{!wrapper.productCode}" style="width:115px"/>
<apex:column headerValue="Model Series" value="{!wrapper.modelSeries}" style="width:115px"/>
<apex:column headerValue="Product Group" value="{!wrapper.productGroup}" style="width:140px"/>
<apex:column headerValue="Item Type" value="{!wrapper.itemType}" style="width:140px"/>
</apex:dataTable>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageBlock id="WM" rendered="{!isWarning}">
<apex:outputText value="No Products found with the search criteria"></apex:outputText>
</apex:pageBlock>
<apex:sectionHeader title="Add Products to" subtitle="{!OptyName}" rendered="{!showResultPB}">
Add products to this opportunity from <strong>{!PricebookName}</strong> price book
</apex:sectionHeader>
<apex:pageblock id="IB" rendered="{!showResultPB}">
<apex:pageBlockButtons >
<apex:commandButton value="Save" style="width:75px" action="{!save}"/>
<apex:commandButton value="Cancel" style="width:75px" action="{!cancel}"/>
</apex:pageBlockButtons>
<apex:dataTable value="{!selectedProducts}" var="wrapper" cellpadding="4" border="0" style="width:1250px">
<apex:column headerValue="Product Name">
<apex:outputText value="{!wrapper.productDescription}"/>
</apex:column>
<apex:column headerValue="Line Description">
<apex:inputText value="{!wrapper.lineDescription}"/>
</apex:column>
<apex:column headerValue="Sales Price">
<apex:inputText value="{!wrapper.salesPrice}"/>
</apex:column>
<apex:column headerValue="Quantity">
<apex:inputText value="{!wrapper.quantity}"/>
</apex:column>
<apex:column headerValue="Gross Margin Amount ">
<apex:inputText value="{!wrapper.grossMarginAmount}"/>
</apex:column>
<apex:column headerValue="Requested Delivery Date">
<apex:input type="date" value="{!wrapper.dateValue}"/>
</apex:column>
<apex:column headerValue="Second Hand / Contract Renew">
<apex:inputCheckbox value="{!wrapper.isSecondHand}"/>
</apex:column>
</apex:dataTable>
</apex:pageblock>
</apex:form>
</apex:page>
Need help in aligning the VF page set to window, when I try to reduce the coulmns width I do not see any change in the page width.
VF page code,
<apex:page controller="ProductSearch" action="{!loadData}" tabstyle="Opportunity" docType="html-5.0">
<apex:form >
<apex:sectionHeader title="Choose Price Book for" subtitle="{!OptyName}" rendered="{!showPB}">
Select a price book for this opportunity. You can add products only from a single price book. Changing a selected price book will delete all existing products from this opportunity.
<p>Choose a price book that contains products with the same currency as the opportunity. If no products are available for the chosen currency, ask your administrator to create them.</p>
</apex:sectionHeader>
<apex:pageblock id="CP" title="Choose Price Book for: {!OptyName}" rendered="{!showPB}">
<apex:pageBlockSection collapsible="false">
<apex:selectList title="Price Book" label="Price Book" value="{!selectedPB}" size="1">
<apex:selectOptions value="{!PBList}"/>
</apex:selectList>
</apex:pageBlockSection>
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="Save" style="width:50px" action="{!savePB}"/>
<apex:commandButton value="Cancel" style="width:50px" action="{!cancel}"/>
</apex:pageBlockButtons>
</apex:pageblock>
<apex:pageBlock title="Product Search" id="PS1" rendered="{!showSearhBlock}">
<apex:pageBlockSection >
<apex:selectList label="Product Group:" value="{!selectedPG}" multiselect="false" size="1">
<apex:actionsupport event="onchange" action="{!getProductGroup}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!BGList}" />
</apex:selectList>
<!--<apex:selectList label="Product Name:" value="{!selectedName}" multiselect="false" size="1">
<apex:actionsupport event="onchange" action="{!getProductName}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!NameList}" />
</apex:selectList> -->
<apex:selectList label="Item Type:" value="{!selectedItemType}" multiselect="false" size="1">
<apex:actionsupport event="onchange" action="{!getItemType}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!itemTypeList}" />
</apex:selectList>
<apex:selectList label="Model Series:" value="{!selectedmodel}" multiselect="false" size="1">
<apex:actionsupport event="onchange" action="{!getModelSeries}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!modelSeriesList}" />
</apex:selectList>
<!--<apex:selectList label="Product Description:" value="{!selectedDes}" multiselect="false" size="1">
<apex:selectOptions value="{!DesList}" />
</apex:selectList> -->
<!-- <apex:selectList label="Life Cycle:" value="{!selectedLC}" multiselect="true" size="3">
<apex:actionsupport event="onchange" action="{!getLieCycle}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!LCList }" />
</apex:selectList> -->
<apex:selectCheckboxes value="{!selectedLC1}" label="Life Cycle:">
<apex:actionsupport event="onchange" action="{!getLieCycle}" reRender="PS1, SR, WM"/>
<apex:selectOptions value="{!LCList1}"/>
</apex:selectCheckboxes>
<apex:inputText label="Full Product Search" value="{!productSearch}" size="75"/>
<apex:actionregion >
<apex:commandButton title="Search on Search" value="Search Within Results" action="{!SearchOnSearch}" style="width:130px"/>
<apex:commandButton title="Search" value="Full Search" action="{!FullProductSearch}" style="width:100px"/>
</apex:actionregion>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageBlock rendered="{!showSearchPB}" id="SR">
<!--
<apex:pageBlockButtons >
<apex:commandButton value="Select" style="width:75px" action="{!getSelectedRows}"/>
<apex:commandButton value="Cancel" style="width:75px" action="{!cancel}"/>
</apex:pageBlockButtons> -->
<apex:pageBlockSection title="Search Results">
<apex:dataTable value="{!products}" var="wrapper" cellpadding="4" border="1" style="width:1250px">
<apex:column style="width:20px">
<!-- <apex:facet name="header"> <apex:inputCheckbox >
<apex:actionSupport event="onclick" action="{!GetSelected}" onsubmit="checkAll(this)"/>
</apex:inputCheckbox></apex:facet> -->
<apex:inputCheckbox id="checkedone" value="{!wrapper.selected}">
<apex:actionSupport event="onclick" action="{!GetSelected}" rerender="SP"/>
</apex:inputCheckbox></apex:column>
<apex:column headerValue="Product Name" value="{!wrapper.prod.Model_Description_Formula__c}" style="width:290px"/>
<apex:column headerValue="Product Code" value="{!wrapper.prod.ProductCode}" style="width:115px"/>
<apex:column headerValue="Model Series" value="{!wrapper.prod.Model_Series__c}" style="width:115px"/>
<apex:column headerValue="Product Group" value="{!wrapper.prod.Family}" style="width:140px"/>
<apex:column headerValue="Item Type" value="{!wrapper.prod.CBS_Item_Type_Description__c}" style="width:140px"/>
</apex:dataTable>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageBlock rendered="{!showSearchPB}" id="SP">
<apex:pageBlockButtons rendered="{!showButtons}">
<apex:commandButton value="Select" style="width:75px" action="{!getSelectedRows}"/>
<apex:commandButton value="Cancel" style="width:75px" action="{!cancel}"/>
</apex:pageBlockButtons>
<apex:variable value="{!0}" var="rowNum"/>
<apex:pageBlockSection title="Selected Products">
<apex:dataTable value="{!selectedSearchProducts}" var="wrapper" cellpadding="4" border="1" style="width:1250px">
<apex:column style="width:20px">
<!-- <apex:facet name="header"> <apex:inputCheckbox >
<apex:actionSupport event="onclick" action="{!GetSelected}" onsubmit="checkAll(this)"/>
</apex:inputCheckbox></apex:facet> -->
<apex:commandLink value="Remove" style="color:blue" action="{!RemoveSelected}" reRender="SP">
<apex:param value="{!rowNum}" name="rowToRemove" assignTo="{!rowToRemove}"/>
</apex:commandLink>
<apex:variable var="rowNum" value="{!rowNum + 1}"/>
<!-- <apex:inputCheckbox id="checkedone" value="{!wrapper.selected}">
</apex:inputCheckbox> --> </apex:column>
<apex:column headerValue="Product Name" value="{!wrapper.productName}" style="width:290px"/>
<apex:column headerValue="Product Code" value="{!wrapper.productCode}" style="width:115px"/>
<apex:column headerValue="Model Series" value="{!wrapper.modelSeries}" style="width:115px"/>
<apex:column headerValue="Product Group" value="{!wrapper.productGroup}" style="width:140px"/>
<apex:column headerValue="Item Type" value="{!wrapper.itemType}" style="width:140px"/>
</apex:dataTable>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageBlock id="WM" rendered="{!isWarning}">
<apex:outputText value="No Products found with the search criteria"></apex:outputText>
</apex:pageBlock>
<apex:sectionHeader title="Add Products to" subtitle="{!OptyName}" rendered="{!showResultPB}">
Add products to this opportunity from <strong>{!PricebookName}</strong> price book
</apex:sectionHeader>
<apex:pageblock id="IB" rendered="{!showResultPB}">
<apex:pageBlockButtons >
<apex:commandButton value="Save" style="width:75px" action="{!save}"/>
<apex:commandButton value="Cancel" style="width:75px" action="{!cancel}"/>
</apex:pageBlockButtons>
<apex:dataTable value="{!selectedProducts}" var="wrapper" cellpadding="4" border="0" style="width:1250px">
<apex:column headerValue="Product Name">
<apex:outputText value="{!wrapper.productDescription}"/>
</apex:column>
<apex:column headerValue="Line Description">
<apex:inputText value="{!wrapper.lineDescription}"/>
</apex:column>
<apex:column headerValue="Sales Price">
<apex:inputText value="{!wrapper.salesPrice}"/>
</apex:column>
<apex:column headerValue="Quantity">
<apex:inputText value="{!wrapper.quantity}"/>
</apex:column>
<apex:column headerValue="Gross Margin Amount ">
<apex:inputText value="{!wrapper.grossMarginAmount}"/>
</apex:column>
<apex:column headerValue="Requested Delivery Date">
<apex:input type="date" value="{!wrapper.dateValue}"/>
</apex:column>
<apex:column headerValue="Second Hand / Contract Renew">
<apex:inputCheckbox value="{!wrapper.isSecondHand}"/>
</apex:column>
</apex:dataTable>
</apex:pageblock>
</apex:form>
</apex:page>
http://www.thephani.com/pageblock-scrollbars/
http://learn4sfdc.blogspot.in/2012/04/how-to-change-column-width-in.html
<div style="overflow: scroll; width: 400px; height: 200px;"> <apex:pageBlock title="My Content"> <apex:pageBlockTable value="{!accounts}" var="item"> <apex:column value="{!item.name}" /> <apex:column value="{!item.Rating}" /> <!-- Header Generated automatically --> </apex:pageBlockTable> </apex:pageBlock> </div>Please let us know if this will help you
Thanks
AMit Chaudhary
This doesn't help, my problem is with the width of the entire VF page and not the sections, when I use width as 100% then it shows like
I'm looking for soluction where my VF page should fit to the window and I don't want to see the scroll bar for width.
<apex:outputPanel layout="block" styleClass="container">
</apex:outputPanel>
And Add below CSS
<style type="text/css">
.container { overflow:scroll; height:100%; width: 100%; }
</style>