Sign Up ›

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

How to achieve word wrapping for columns in Apex:dataTable

Hi,

 

I am trying to enable text wrapping in the following code .  Any and all help is appreciated.  I have tried:

 

overflow: hidden

word-wrap:break-word

 

<apex:pageBlockTable value="{!WrapSPConditionList}" var="u" style="width:900px;">
 <apex:column >
         <apex:inputCheckbox value="{!u.isSelected}" disabled="false"/>
        </apex:column>
        <apex:column style="width:100%">
                <apex:inputText value="{!u.ConditionText}" style="word:wrap:break-word; width: 100%"  />               
        </apex:column>              
</apex:pageBlockTable>

 

Thanks,

Vibrate

Best Answer chosen by Admin (Salesforce Developers) 
VibrateVibrate

bob_buzzard,

 

Thanks for the suggestion.  After doing a view source on the web page I looked at the following piece of code:

 

<td class="dataCell  " id="j_id0:upViewForm:pb1:j_id60:j_id61:1:j_id64" colspan="1" style="width:100%; "><input type="text" name="j_id0:upViewForm:pb1:j_id60:j_id61:1:j_id65" value="You must apply for a XXXX Closure XXXXXX for the above referenced XXXXX from the XXX, XXXXXXX 7 XXXXXXX, and it must be approved before starting work." style="width: 100%; word-wrap:break-word-all; -ms-word-wrap: break-word;" />

 

It appears to me that the style is being applied by the browser but I am just not seeing the desired effect.

 

Thanks,

Vibrate

All Answers

bob_buzzardbob_buzzard

Check out the following discussion:

 

http://boards.developerforce.com/t5/Visualforce-Development/Wrapping-text-inside-table-cell/td-p/174589
VibrateVibrate

bob_buzzard,

 

This is not working for me.  I guess it might be becaus I am using a "PageBlockTable" and not a regular HTML table.

 

Thanks,

Vibrate
bob_buzzardbob_buzzard

You should be able to specify the style that matches the components rendered - I'd expect pageblocktable to actually produce an HTML table when rendered.
VibrateVibrate

Here is what I have and it is not working.  Hopefully you can spot where I am going wrong. Note this is an internal site which will only run IE.

 <apex:pageBlockSection title="Special Conditions:" columns="1">
            <apex:pageBlockTable value="{!WrapSPConditionList}" var="u" style="width:900px; overflow: hidden; ">
                <apex:column >
                    <apex:inputCheckbox value="{!u.isSelected}" disabled="false"/>
                </apex:column>
                 <apex:column style="width:100%">
                    <apex:inputText value="{!u.ConditionText}" style="word:wrap:break-word; width: 100%" />               
               </apex:column>             
            </apex:pageBlockTable>
       </apex:pageBlockSection>

 

Thanks,

Vibrate
bob_buzzardbob_buzzard

It depends on which version of IE you are using. Check out this stack overflow Q&A:

 

http://stackoverflow.com/questions/8357689/word-wrap-does-not-work-in-ie
VibrateVibrate

bob_buzzard,

 

It seems like the examples are all for regular HTML tables.  In my case I am using a VisualForce pageBlockTable.  Could you point me to an example where a VisualForce pageBlockTable is used?  Any and all help with this issue is highly appreciated.

 

Thanks,

Vibrate
bob_buzzardbob_buzzard

There is no such thing as a pageblocktable on an HTML page - that is a Visualforce component that renders as an HTML table.  The styling therefore needs to be applied to an HTML element so that it will have the appropriate effect.
VibrateVibrate

bob_buzzard,

 

Thanks very much for taking the time to help me with this.  However, I am a little confused as I am new to web UI related work.  I guess I am simply trying to find out if it is possible to enable text wrapping of column elements in a VisualForce pageBlockTable and if this is possible how to do it within a apex page.  I hope this clarifies my intent.  Again thanks for taking the time to help me with this.

 

Thanks,

Vibrate
bob_buzzardbob_buzzard

The point I'm making is that there is no such thing as an apex page as far as the browser is concerned - its an HTML page. Therefore you need to find the styles and apply them in the appropriate place for the browser.  That is why there are particular styles for IE/Mozilla etc.

 

It may be that applying the style to an input field as you have means that it is in the wrong place from the browser's perspective. You need to look at the generated HTML and figure out where to place your style.

 
bob_buzzardbob_buzzard

Actually, it won't make any difference how you style it - inputtext elements won't word wrap.  If you want a multi-line input, its best to use a text area.
VibrateVibrate

bob_buzzard,

 

Thanks for the suggestion.  After doing a view source on the web page I looked at the following piece of code:

 

<td class="dataCell  " id="j_id0:upViewForm:pb1:j_id60:j_id61:1:j_id64" colspan="1" style="width:100%; "><input type="text" name="j_id0:upViewForm:pb1:j_id60:j_id61:1:j_id65" value="You must apply for a XXXX Closure XXXXXX for the above referenced XXXXX from the XXX, XXXXXXX 7 XXXXXXX, and it must be approved before starting work." style="width: 100%; word-wrap:break-word-all; -ms-word-wrap: break-word;" />

 

It appears to me that the style is being applied by the browser but I am just not seeing the desired effect.

 

Thanks,

Vibrate

This was selected as the best answer
VibrateVibrate

bob_buzzard,

 

Thanks for all the help.  I changed the input element to an inputtextarea and it worked!  Thanks a Million.

 

 <apex:inputTextArea value="{!u.ConditionText}" style="width: 100%; word-wrap:break-word; -ms-word-wrap: break-word;" />               
               </apex:column>             

 

Thanks,

Vibrate
sfdcFanBoysfdcFanBoy

Using white-space attribute worked for me easily.  The whole table must be fixed width also to be able to wrap the text.

https://sfdcfanboy.com/2018/03/27/a-tip-a-day-38-pageblocktable-wrap-text/