function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Qin LuQin Lu 

Specify column width dynamically in visual force page

I have a page using apex:repeat to generate the content dynamically.  The page code is like the following
<apex:pageBlock >
  <apex:repeat value="{!Categories}" var="category">
     <apex:pageBlockSection title="{!category}" columns="1">
         <apex:pageBlockTable value="{!AcctListByCategory[category]}" var="fa"  title="category">
            <apex:repeat value="{!fieldListByCategory[category]}" var="field">
                   <apex:column value="{!fa[field]}" >
                   </apex:column>  
            </apex:repeat>
        </apex:pageBlockTable>
    </apex:pageBlockSection>
  </apex:repeat>
</apex:pageBlock>

Because each category the number of fields are different, some has 4 columns and some has 5 columns.  So the columns in pageBlockTables are not in line. I want to figure out a way to set the first 2 column and the last one column width to a fixed number, so the whole page looks better. I understand that we can use <apex:column width="120"> to set the column width. But because my page dynamically rendering the columns, I don't know how I can figure out the first 2 columns and last column and set the width. Any idea is appreciated!
Best Answer chosen by Qin Lu
bob_buzzardbob_buzzard
I tend to use an inline style on the column for some reason - not sure if that is because the width didn't work for me or something else.

E.g.

<apex:column style="width:10%" value="{!wrap.opp.Name}" />

All Answers

bob_buzzardbob_buzzard
Are you using field sets here?  If so I think you'll need to use JavaScript as I can't see how you could introduce a wrapper class into field set.  However, if you are iterating a list of class properties, you could calculate the widths server side and iterate a wrapper class that contains the field and its width.
Qin LuQin Lu
Hi, Bob, Thanks you for the response. I am iterating a list of class properties. I have calculated the width in server side and tried to iterate the column width, but it doesn't seem to work properly I have the following code {!fa[field]} in one table, the column width assigned to each column is 20%, 20%, 40%, 20%, but on UI, the column width is still the same for each column. The column width does take some effect, if I remove the width, the table look different. Am I missing any other things?
bob_buzzardbob_buzzard
I tend to use an inline style on the column for some reason - not sure if that is because the width didn't work for me or something else.

E.g.

<apex:column style="width:10%" value="{!wrap.opp.Name}" />


This was selected as the best answer