[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Adjusting how a cell handles text in CFGrid

Posted on 2010-11-29
3
Medium Priority
?
798 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:sonicimpulse
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 

Accepted Solution

by:
sonicimpulse earned 0 total points
ID: 34235191
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
 

Author Closing Comment

by:sonicimpulse
ID: 34235197
I searched everywhere for this.  I seen a lot of people asking on here with no help at all.  Here is the answer.
0
 
LVL 1

Expert Comment

by:medsoos
ID: 34235214
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

Featured Post

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM:  How to open a cfwindow or run a function on double click of a cfgrid row. One of my clients wanted to be able to double click on a row item to get more detailed information about a transaction and to be able to modify the line items i…
Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question