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
Dogen ZenjiDogen Zenji 

pageBlockTable or dataTable not formatting

Hello all!  I really appreciate everyone's input on these boards so I just wanted to start by saying thanks.  Perhaps I am missing something but I cannot get a pageBlockTable or dataTable to take any of the formatting attributes like width, columns or columnsWidth.  For example...

Code:
<apex:pageBlockTable value="{!eventOLIs}" var="eventOLI" width="100%">
    <apex:column width="15%" headerValue="Brand" value="{!eventOLI.productName}"/>
    <apex:column width="15%" headerValue="Product Code" value="{!eventOLI.productCode}"/>
    <apex:column width="30%" headerValue="Date"><apex:inputField value="{!eventOLI.oli.ServiceDate}"/></apex:column>
    <apex:column width="10%" headerValue="Sales Price"><apex:inputField value="{!eventOLI.oli.UnitPrice}"/></apex:column>
    <apex:column width="10%" headerValue="Total Sq Footage"><apex:inputField value="{!eventOLI.oli.Total_Square_Footage__c}"/></apex:column>
    <apex:column width="10%" headerValue="Booth #"><apex:inputField value="{!eventOLI.oli.Booth__c}"/></apex:column>
    <apex:column width="10%" headerValue="# of Attendees"><apex:inputField value="{!eventOLI.oli.of_Attendees__c}"/></apex:column>
</apex:pageBlockTable>

Regardless of whether I use percentages or pixels for the widths, how many columns are specified or whether I sprecify formatting attributes on the columns themselves, all columns are displayed in a single row making the table too wide and causing a horizontal scroll bar to appear as below...



Even more odd, the HTML seems to be generated correctly for when the rendered code is inspected, the colgroup is there for number of columns and the width attributes are there, they just have no effect in both Firefox 3 and IE7.
Message Edited by Dogen Zenji on 07-24-2009 09:21 AM
Message Edited by Dogen Zenji on 07-24-2009 09:23 AM
TehNrdTehNrd
It looks like your input fields are too large and are messing up the formatting. You are setting the width of those input fields to 10% but the pixel size of those input fileds is probably more that 10%.

Lets say you had a table that is 100 pixels wide with 5 columns. You set the the first column 40% and the remainder to 15%. 15% would be a width of 15 pixels but if your input fields in these columns have a width of 25pixels it is going to cause formatting issues.

I think you can shrink the inputFields by adding the style attribute style="width:15px"







Message Edited by TehNrd on 06-20-2008 11:30 AM
Dogen ZenjiDogen Zenji
I knew it would be something simple I forgot.  That's the one place I didn't try style width and it worked.  Thanks!
Dogen ZenjiDogen Zenji
Here's another formatting question related to this same table.  Anyone know how I can force a line break in between words in the headerValue attributes?  I know I could accomplish the same thing using the column header facet but was hoping there was a character I could put in the headerValue attribute.  I tried using a unicode LF ( &#x0A; ) but it was rendered as a literal.


Message Edited by Dogen Zenji on 06-20-2008 11:59 AM

Message Edited by Dogen Zenji on 06-20-2008 12:00 PM
jwetzlerjwetzler
Nope, you'll need to drop into a header facet to do that.