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
symantecAPsymantecAP 

Fixed Column Width

Hi All 

 

I have  VF page where i am displaying Product data in columns.. 

I need to have a fix width to the columns even when the i change the size of the page. 

When i change the size of the page the values in the column start appearing in the next line 

<apex:column headerValue="Product Code"  >
                    <a href="/{!product.prod.id}">{!product.prod.Productcode}</a>
                    </apex:column>
                    
                  <td>  <apex:column headerValue="Product Name">
                 <a href="/{!product.prod.id}">{!product.prod.Name}</a>

                    </apex:column></td>



          <apex:column value="{!product.prod.Description}"  width="35" />
        <td >   <apex:column headerValue="List Price">           
                <apex:repeat value="{!product.pbes}" var="pbe">
                   <apex:outputField value="{!pbe.UnitPrice}" />
                </apex:repeat>
            </apex:column>   </td>
    

 Thanks All

 

Shashikant SharmaShashikant Sharma

you can try nowarp attribute in stlye, if you don't want wraping in any case.

symantecAPsymantecAP

Hi Shashi

 

Here is something i Tried. its still not respecting 

<td> <apex:column headerValue="EMEA SID (USD) "  >           
                <apex:repeat value="{!product.pbea}" var="pbe">
                    <apex:outputField value="{!pbe.unitprice}" style="nowrap" /> 
                </apex:repeat>
            </apex:column> </td> 

 Thanks

Adil

 

Guns1974Guns1974

Just add width in pixel on column like shown below.

 

<apex:column value="{!a.Id}" width="50px"/>

 

It should resolve your issue.

 

Regards

G

symantecAPsymantecAP

Tried this tooo . It doesnt work either. When I minimize my page the values get wrapped. they arent uniform. 

sfdcfoxsfdcfox

You need to make sure you fix the width of the table as well, or it will cause the contents will be restrained to fit inside the available table space. Use a dataTable instead of a pageBlockTable, if applicable. Browsers always try to use only the space given to a component, so you have to override this browser's "smart" behavior by explicitly making the table width a fixed size (not percentage). You can use CSS min-width property to make sure the table stays at least a particular size.

Neena K BainsNeena K Bains
Use columnsWidth attribute. For example:

<apex:pageBlockTable value="{!something}" var="something" styleClass="sortable" columnsWidth="10%,20%,50%,20%">

   <apex:column>
         <apex:outputText value="{!Something.something1__c}"/>
   </apex:column>
   <apex:column>
         <apex:outputText value="{!Something.something2__c}"/>
   </apex:column>
   <apex:column>
         <apex:outputText value="{!Something.something3__c}"/>
   </apex:column>
   <apex:column>
         <apex:outputText value="{!Something.something4__c}"/>
   </apex:column>

</apex:pageBlockTable>
 
ketan vinodrai mehtaketan vinodrai mehta
I did as below and it is working fine for me.
<apex:pageBlockTable value="{!something}" var="something" columns="4" columnsWidth="10%,20%,50%,20%">