Adjusting how a cell handles text in CFGrid

I attached my CFGrid below.  What I want to know is.  Can you change a column to wrap text.

Right now my text in a colum looks like:
here is the examp.....

I would like it to look like:
here is the
example
<cfform name="CouponForm">
              <cfgrid format="html" name="parkGrid" pagesize="5" width="585" selectmode="row" bind="cfc:listCoups.getParks({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
                <cfgridcolumn name="Cid" header="id" display="no">
                <cfgridcolumn name="businessName" width="155" header="Business Name" href="detailcoupon.cfm" hrefkey="id"/>
                <cfgridcolumn name="cDescription" width="230" header="Coupon" />
                <cfgridcolumn name="city" width="80" header="City" />
                <cfgridcolumn name="NEWexpDate" width="120" header="Exp Date" />
              </cfgrid>
            </cfform>

Open in new window

sonicimpulseAsked:
Who is Participating?
 
sonicimpulseConnect With a Mentor Author Commented:
I found a solution for this so I figured I would share it with everybody.  In your .css file add the following.

.x-grid3-cell-inner, .x-grid3-hd-inner{
overflow:hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
padding:3px 3px 3px 5px;
white-space: normal;
}

Then do the following above your CFGrid
<div class="x-grid3-cell-inner">

Don't forget to Close the </div>

I attached my example below.


<div class="x-grid3-cell-inner">
			<cfform name="CouponForm">
              <cfgrid format="html" name="parkGrid" pagesize="5" width="585" selectmode="row" bind="cfc:listCoups.getParks({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
                <cfgridcolumn name="Cid" header="id" display="no">
                <cfgridcolumn name="businessName" width="155" header="Business Name" href="detailcoupon.cfm" hrefkey="id"/>
                <cfgridcolumn name="cDescription" width="230" header="Coupon" />
                <cfgridcolumn name="city" width="80" header="City" />
                <cfgridcolumn name="NEWexpDate" width="120" header="Exp Date" />
              </cfgrid>
            </cfform>
            </div>

Open in new window

0
 
sonicimpulseAuthor Commented:
I searched everywhere for this.  I seen a lot of people asking on here with no help at all.  Here is the answer.
0
 
medsoosCommented:
You can do it with CSS as shown here:

http://www.webtrenches.com/post.cfm/quick-and-easy-column-alignment-for-cfgrid

Put the style above your grid. Just add white-space: normal to the CSS to wrap.


<style type="text/css">
    .x-grid-col {text-align:right;}
    .x-grid-col-0 {text-align:right; white-space:normal;}
    .x-grid-col-1 {text-align:left; white-space:normal;}
    .x-grid-col-2 {text-align:left;}      
</style>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.