Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
OdedHarnivOdedHarniv 

How to change the column width

Hi

 

I'm trying to increase the width of the columns but am not able to make it happen.

I tried both width on the pageBlockTable and on the column but nothing works.

 

What am I doing wrong?

 

 

	                    <apex:pageBlockSection title="Pending Orders">
		                    <apex:form >        
		                        <apex:pageBlockTable width="80%" value="{!mySearchResults}" var="entry">
		                            <apex:column headerValue="Select"> 
		                                <apex:inputCheckbox id="checkedone" value="{!entry.isSelected}"/>
		                                <apex:actionSupport event="onclick" />
		                            </apex:column>
		                            <apex:column value="{!entry.libTitle.Type__c}" headerValue="Type"/>
		                            <apex:column width="500px" value="{!entry.libTitle.Name}" headerValue="Name"/> 
		                            <apex:column value="{!entry.authors}" headerValue="Autors"/> 
		                            <apex:column width="5000px" value="{!entry.libTitle.Abstract__c}" headerValue="Abstract"/> 
		                            <apex:column value="{!entry.libTitle.Publication__c}" headerValue="Publication"/>
		                            <apex:column value="{!entry.libTitle.Publish_Date__c}" headerValue="Publish Date"/>
		                        </apex:pageBlockTable>
		                    </apex:form>                     
	                    </apex:pageBlockSection>
					</apex:pageBlock>

 

Thanks

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard

Its because the pageblocktable is nested in a pageblocksection.  If you make it a child of a pageblock, the widths are honoured.  It seems to be that when its inside a pageblocksection the table headers are a fixed size that can't be influenced by the columns.

 

This worked for me:

 

 

<apex:pageblock title="Contacts">
   <apex:pageBlockTable style="width:100%" value="{!contacts}" var="contact">
      <apex:column style="width:250px" value="{!contact.id}"/>
      <apex:column style="width:250px" value="{!contact.Name}"/>
   </apex:pageBlockTable>
 </apex:pageBlock>

 

 

All Answers

bob_buzzardbob_buzzard

Have you tried specifying the width via an inline style? I've used in the past with success:

 

 

<apex:column style="width:200px"

 

 
OdedHarnivOdedHarniv

This does not do the trick either...

 

Any idea why these do not work?
bob_buzzardbob_buzzard

They do work in my dev org - I don't know why they wouldn't work in your case.

 

Have you tried inspecting the source to see if the width is making it through correctly?
OdedHarnivOdedHarniv

No, I'm not sure how to do that...
OdedHarnivOdedHarniv

Hi 

 

If this is what you meant then it seems it was populated

 

 

		                        &lt;apex:pageBlockTable width="80%" value="{!mySearchResults}" var="entry"&gt;
		                            &lt;apex:column headerValue="Select"&gt; 
		                                &lt;apex:inputCheckbox id="checkedone" value="{!entry.isSelected}"/&gt;
		                                &lt;apex:actionSupport event="onclick" /&gt;
		                            &lt;/apex:column&gt;
		                            &lt;apex:column value="{!entry.libTitle.Type__c}" headerValue="Type"/&gt;
		                            &lt;apex:column style="50000px" value="{!entry.libTitle.Name}" headerValue="Name"/&gt; 
		                            &lt;apex:column value="{!entry.authors}" headerValue="Autors"/&gt; 
		                            &lt;apex:column style="5000000px" value="{!entry.libTitle.Abstract__c}" headerValue="Abstract"/&gt; 
		                            &lt;apex:column value="{!entry.libTitle.Publication__c}" headerValue="Publication"/&gt;
		                            &lt;apex:column value="{!entry.libTitle.Publish_Date__c}" headerValue="Publish Date"/&gt;
		                        &lt;/apex:pageBlockTable&gt;

 

 
bob_buzzardbob_buzzard

I meant to look at the HTML elements that were rendered.  If you are using chrome you can inspect the elements on the HTML page to see what the properties are. It will also show if your width has been overridden by another style etc.
OdedHarnivOdedHarniv

It seems it has propogated to the HTML but still doesn't affect the page.

 

Help needed
bob_buzzardbob_buzzard

Its because the pageblocktable is nested in a pageblocksection.  If you make it a child of a pageblock, the widths are honoured.  It seems to be that when its inside a pageblocksection the table headers are a fixed size that can't be influenced by the columns.

 

This worked for me:

 

 

<apex:pageblock title="Contacts">
   <apex:pageBlockTable style="width:100%" value="{!contacts}" var="contact">
      <apex:column style="width:250px" value="{!contact.id}"/>
      <apex:column style="width:250px" value="{!contact.Name}"/>
   </apex:pageBlockTable>
 </apex:pageBlock>

 

 

This was selected as the best answer
OdedHarnivOdedHarniv

Thanks, You are right.

 

So disappointing I really liked the pageblocksection look & feel

 

 
OdedHarnivOdedHarniv

Another option is using the apex:dataTable but then the table needs to be styled 
colemabcolemab

If you set your columns=1 on the page block section and use the columnswidth on the pageblock table, the table will honor the widths.

 

Psudeo Code:

<apex:pageBlockSection title="Items" columns="1">
<apex:pageBlockTable value="{!RequestItems}" var="d" columnsWidth="250px, 180px, 120px, 100px">
<! -- INSERT COLUMNS CODE HERE -->
</apex:pageBlockTable> 
</apex:pageBlockSection>

 

Edit: Ok so it won't totally honor the widths as it will make the pageblock table fill up the width of the screen.
Sure@DreamSure@Dream

Yes the above suggestion works well...

 

<apex:pageblock>

<apex:pageblocksection columns="1">

<apex:pageblocktable columnswidth="250px,250px">

.........

........

</apex:pageblocktable>

</apex:pageblocksection>

</apex:pageblock>
Priya Jhamb 8Priya Jhamb 8
It works for me as well.
Thanks bob_buzzard
Ridhi AgarwalRidhi Agarwal
i hv below code for view page-


<apex:page standardController="Account_Plan__c" tabStyle="Account_Plan__c" extensions="Cntrl_AccountPlan" title="" >
  <apex:form >
      <apex:pageBlock>
          <apex:pageBlockSection title="ACCOUNT PLAN DETAIL" columns="1">
              <apex:outputField value="{!accountPlan.Name}" />  
              <apex:outputField value="{!accountPlan.Year__c}"/>
              <apex:outputField value="{!accountPlan.Account__c}" />
              <apex:outputField value="{!Account_Plan__c.OwnerId}" label="Account Plan Owner" />
              <apex:outputField value="{!accountPlan.Key_Brands__c}"/>
              <apex:outputField value="{!accountPlan.Key_Client_Agency_Contacts__c}"/>  
          </apex:pageBlockSection>
          <apex:pageBlockSection title="ACCOUNT ANALYSIS" columns="1">
              <apex:outputField value="{!accountPlan.Last_Year_s_Successes__c}"/> 
              <apex:outputField value="{!accountPlan.Last_Year_s_Challenges__c}"/>  
              <apex:outputField value="{!accountPlan.This_Year_s_Opportunities__c}"/>  
              <apex:outputField value="{!accountPlan.Product_Asks__c}"/>   
          </apex:pageBlockSection>
         
          <apex:pageBlockSection title="ACCOUNT REVENUE" columns="1">
          <apex:pageBlockTable value="{!null}" var="d" columnsWidth="20%,20%,20%,20%,20%">
            <apex:column><apex:outputField value="{!accountPlan.Last_Year_s_Revenue_Q1__c}" /><apex:outputField value="{!accountPlan.This_Year_s_Plan_Q1__c}"/><apex:outputField value="{!accountPlan.This_Year_s_Actuals_Q1__c}"/> </apex:column> 
            <apex:column><apex:outputField value="{!accountPlan.Last_Year_s_Revenue_Q1__c}" /><apex:outputField value="{!accountPlan.This_Year_s_Plan_Q1__c}"/><apex:outputField value="{!accountPlan.This_Year_s_Actuals_Q1__c}"/> </apex:column> 
            <apex:column><apex:outputField value="{!accountPlan.Last_Year_s_Revenue_Q1__c}" /><apex:outputField value="{!accountPlan.This_Year_s_Plan_Q1__c}"/><apex:outputField value="{!accountPlan.This_Year_s_Actuals_Q1__c}"/> </apex:column> 
            <apex:column><apex:outputField value="{!accountPlan.Last_Year_s_Revenue_Q1__c}" /><apex:outputField value="{!accountPlan.This_Year_s_Plan_Q1__c}"/><apex:outputField value="{!accountPlan.This_Year_s_Actuals_Q1__c}"/> </apex:column> 
            <apex:column><apex:outputField value="{!accountPlan.Last_Year_s_Revenue_Q1__c}" /><apex:outputField value="{!accountPlan.This_Year_s_Plan_Q1__c}"/><apex:outputField value="{!accountPlan.This_Year_s_Actuals_Q1__c}"/> </apex:column> 
          </apex:pageBlockTable>
          </apex:pageBlockSection>
          
          <apex:pageBlockButtons >
                <apex:commandButton action="{!Edit}" value="Edit"/>
                <apex:commandButton value="Delete" action="{!Delete}" onclick="if(!confirm('Are you sure?')){return false};"/>
                <input value="Clone" onclick="navigateToUrl('/apex/AccountPlan?clone=1&id={!Account_Plan__c.id}')" type="button" />
          </apex:pageBlockButtons>
      </apex:pageBlock>
  </apex:form>
</apex:page>

In my Account Revenue section i have 5 columns. to adjust the column width i am using page block table. But nothing is getting displayed under ACCONT REVENUE. Please guide.