function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
mauricio.ramos@corpitalmauricio.ramos@corpital 

Cannot modify pageblocktable column width

Hello,

 

I have tried everything I can think of and I cannot get a pageblocktable to modify the column width to custom sizes and this is having a negative impact on the usability of the page. I have tried adding the width tag to the columns, I also tried using a style tag with a width parameter. I also tried defining the columns width in the pageblocktable definition but NO LUCK.  I am not sure what is causing the columns not to change their sizes, although I have a feeling that some of the inner tags in the columns may have something to do with it. I say this because I also tried changing their width without any tag other than the label and the column tag and it works. Please see code below, the first is the working example i have tried where columns do expand/contract to the respective width. The second example is the one I need to use in my VF page and the one that does not want to cooperate and change column widths. Please assist!

 

the table in blue is the example table adn the red one is the one I need for it to expand contract, right now it is trying to set widths using a style tag, but as I mentioned already, other methods are not working either.

 

 

<apex:page controller="SalesDocumentManager_Controller" tabStyle="SCRB_SalesOrder__c" id="thePage" >
<apex:sectionHeader title="Create Sales Document" subtitle="{!mAccount.Name}"/>
<apex:form id="theForm">
<apex:outputPanel id="msgs" >
<apex:messages style="font-weight:bold; color:red; font-size:medium; text-align:center; " />
<apex:actionStatus startText="Saving changes......" id="saveStatus" startstyle="font-weight:bold; color:green; font-size:medium; text-align:center; " layout="block" />
</apex:outputPanel>

<apex:commandButton action="{!saveSO}" value="Save Changes" reRender="out,btnAddSOI,msgs, fOppId" status="saveStatus" >
</apex:commandButton>

<!----------------------------->
<!--SALES ORDER ITEMS SECTION-->
<!----------------------------->

<apex:pageblock title="TEST table">
<apex:pageBlockTable style="width:100%" value="{!SOItems}" var="SOI" >
<apex:column headerValue="Action" style="width:150px">
<apex:commandLink value="Del" action="{!del}" rerender="tablePnl,detailPanel" style="font-weight:bold" >
<apex:param name="delname" value="{!SOI.id}" assignTo="{!currSOIid}"/>
</apex:commandLink>
&nbsp;|&nbsp;
<apex:commandLink value="Save" action="{!saveSOI}" rerender="tablePnl,detailPanel" style="font-weight:bold" status="saveSOIstatus" >
<apex:param name="savename" value="{!SOI.id}" assignTo="{!currSOIid}"/>
</apex:commandLink>
</apex:column>
<apex:column style="width:250px" value="{!SOI.Product_Name_Custom__c}"/>
<apex:column style="width:250px" value="{!SOI.Line_Type__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>

<apex:pageblock title="Sales Order Items" tabStyle="SCRB_SalesOrder__c" id="SOIpgblk" >

<apex:messages style="font-weight:bold; color:red; font-size:medium; text-align:center; " />
<apex:pageBlockButtons location="top" >
<apex:commandButton action="{!AddSOI}" value="Add New Item" rerender="tablePnl" disabled="{!NOT(SOsaved)}" id="btnAddSOI" />

</apex:pageBlockButtons>
<apex:actionStatus startText="Saving record......" id="saveSOIstatus" startstyle="font-weight:bold; color:green; font-size:small; text-align:center; " layout="block" />
<apex:actionFunction name="doUpdateProdData" action="{!updateSearchProductData}" reRender="detailPanel, tablePnl" immediate="true">
<apex:param id="prodId" value="" name="prodId"/>
</apex:actionFunction>

<apex:actionRegion id="prodUpdate" renderRegionOnly="false">
<apex:outputPanel id="tablePnl">
<apex:pageblockTable value="{!SOItems}" var="SOI" id="SOIList" style="width:100%">
<apex:column headerValue="Action" >
<apex:commandLink value="Del" action="{!del}" rerender="tablePnl,detailPanel" style="width:150px" >
<apex:param name="delname" value="{!SOI.id}" assignTo="{!currSOIid}"/>
</apex:commandLink>
&nbsp;|&nbsp;
<apex:commandLink value="Save" action="{!saveSOI}" rerender="tablePnl,detailPanel" style="font-weight:bold" status="saveSOIstatus" >
<apex:param name="savename" value="{!SOI.id}" assignTo="{!currSOIid}"/>
</apex:commandLink>
</apex:column>
<apex:column headerValue="Line type" id="ltcol" style="width:50px">
<apex:actionRegion id="lnTypeRgn" renderRegionOnly="false">
<apex:inputField value="{!SOI.Line_Type__c}" id="fLineType" required="true" >
<apex:actionSupport event="onchange" rerender="tablePnl" action="{!resetRowData}">
<apex:param name="currSOIid" value="{!SOI.Id}" assignTo="{!currSOIid}"/>
</apex:actionSupport>

</apex:inputField>
</apex:actionRegion>
</apex:column>

<apex:column headerValue="Product" id="prodCol" style="width:50px">
<apex:actionRegion id="prodRgn">
<apex:inputField value="{!SOI.Product_Name_Custom__c}" id="fProd" onFocus="this.blur()" >
<apex:actionSupport event="onchange" reRender="detailPanel" action="{!loadSOIDs}" >
<apex:param name="currSOIid" value="{!SOI.Id}" assignTo="{!currSOIid}"/>
<apex:param name="currSOILT" value="{!SOI.Line_Type__c}" assignTo="{!currLineType}"/>
</apex:actionSupport>
</apex:inputField>


<apex:commandLink onclick="prodLookup(this.parentNode.parentNode)" reRender="fProd">
<apex:image value="{!$Resource.lookupIcon}"/>
<apex:param name="currSOI" value="{!SOI.id}" assignTo="{!currSOIid}"/>
</apex:commandLink>
</apex:actionRegion>
</apex:column>
<apex:column headerValue="Description" style="width:50px">
<apex:actionRegion id="rgnDesc" renderRegionOnly="false" >
<apex:inputField value="{!SOI.Description__c}" id="fDescr" >
<apex:actionSupport event="onfocus" reRender="detailPanel" action="{!loadSOIDs}">
<apex:param name="currSOIid" value="{!SOI.Id}" assignTo="{!currSOIid}"/>
<apex:param name="currSOILT" value="{!SOI.Line_Type__c}" assignTo="{!currLineType}"/>
</apex:actionSupport>
</apex:inputField>
</apex:actionRegion>
</apex:column>
<apex:column headerValue="Quantity" style="width:50px">
<apex:actionRegion >
<apex:inputField value="{!SOI.Quantity__c}" id="fQTY" required="{!SOI.Product_Name_Custom__c <> null}" >
<apex:actionSupport event="onfocus" reRender="detailPanel" action="{!loadSOIDs}">
<apex:param name="currSOIid" value="{!SOI.Id}" assignTo="{!currSOIid}"/>
<apex:param name="currSOILT" value="{!SOI.Line_Type__c}" assignTo="{!currLineType}"/>
</apex:actionSupport>
<apex:actionSupport event="onchange" rerender="fDiscAmt,colTest,fTotalPrice,fProfit" action="{!calculateTotalPrice}">
<apex:param name="currSOIQty" value="{!SOI.Id}" assignTo="{!currSOIid}"/>
</apex:actionSupport>
</apex:inputField>
</apex:actionRegion>
</apex:column>
<apex:column headerValue="Unit Cost" style="width:50px" >
<apex:inputField value="{!SOI.Unit_Cost__c}" id="fUnitCost">
<apex:actionSupport event="onchange" rerender="fDiscAmt,fTotalPrice,fProfit" action="{!calculateTotalPrice}">
<apex:param name="currSOIUC" value="{!SOI.Id}" assignTo="{!currSOIid}"/>
</apex:actionSupport>
</apex:inputField>
</apex:column>
<apex:column headerValue="Sales Price ex VAT" style="width:50px">
<apex:inputField value="{!SOI.SalesPrice__c}" id="fSalesPrice" >
<apex:actionSupport event="onchange" rerender="fDiscAmt,fTotalPrice,fProfit" action="{!calculateTotalPrice}">
<apex:param name="currSOISP" value="{!SOI.Id}" assignTo="{!currSOIid}"/>
</apex:actionSupport>
</apex:inputField>
</apex:column>
<apex:column headerValue="Line Disc Pct." style="width:50px">
<apex:inputField value="{!SOI.Line_Discount_Pct__c}" id="fDiscPct">
<apex:actionSupport event="onchange" rerender="fDiscAmt,fTotalPrice,fProfit" action="{!calculateTotalPrice}">
<apex:param name="currSOIDP" value="{!SOI.Id}" assignTo="{!currSOIid}"/>
</apex:actionSupport>
</apex:inputField>
</apex:column>
<apex:column headerValue="Line Disc Amt." style="width:50px">
<apex:inputField value="{!SOI.Line_Discount_Amount__c}" id="fDiscAmt">
<apex:actionSupport event="onchange" rerender="fDiscPct,fTotalPrice,fProfit" action="{!calculateDiscPct}">
<apex:param name="currSOIDA" value="{!SOI.Id}" assignTo="{!currSOIid}"/>
</apex:actionSupport>
</apex:inputField>
</apex:column>
<apex:column headerValue="Profit" style="width:50px">
<apex:outputField value="{!SOI.Profit__c}" id="fProfit"/>
</apex:column>
<apex:column headerValue="Total Price" style="width:50px">
<apex:outputField value="{!SOI.TotalPrice__c}" id="fTotalPrice"/>
</apex:column>
<apex:column headerValue="Line Status" style="width:50px">
<apex:outputField value="{!SOI.Line_Status__c}" id="fLineStatus" />
</apex:column>
</apex:pageBlockTable>
</apex:outputPanel>
</apex:actionRegion>


</apex:pageBlock>
</apex:form>
</apex:page>

Dipa87Dipa87

Try Using styleClass

<apex:pageBlockTable styleClass="pgBlckCls">

 

</apex:pageBlockTable>

 

<style type="text/css">

   .pgBlckCls{

           width: 100%;

   }

</script>

mauricio.ramos@corpitalmauricio.ramos@corpital
No Luck, it still wont resize.
Dipa87Dipa87

There is an attribute called 'columnsWidth' in pageblocktable.Try that.

 

<apex:pageblocktable columnsWidth="50%">

mauricio.ramos@corpitalmauricio.ramos@corpital

Thank you or our suggestion but I actually did that even before postin the issue and it also did not work. I am sure it has something to do with the extra tags (action region, action support etc.) because the table in blue does not have them and it works just fine, yet the one I want to use with all the fancy ajax and action tags does not work.

 

I have tried using the columns width tag, the width tag in columns, I have also tried using style to set the width and also tried styleclass to set the width with no luck. It is very frustrating because without this the users complain and they are correct because the columns do not fit without a resizing.