Wrap the text in a GridPanel

569 views
Skip to first unread message

TomC.

unread,
Feb 7, 2008, 6:45:02 PM2/7/08
to GWT-Ext Developer Forum
Hi,

On GWT-EXT 2.0, the GridPanel I'm creating contains text value longer
than the column width, how can I wrap the text into multiple lines.


Sanjiv Jivan

unread,
Feb 7, 2008, 7:54:31 PM2/7/08
to gwt...@googlegroups.com
Use this to wrap all cell contents globally
.x-grid3-cell-inner {
     overflow: visible; white-space: normal !important;
}

To wrap cell contents on a certain table only, set an ID to the Grid panel (say company-grid) and then use the CSS

#company-grid  .x-grid3-cell-inner {
     overflow: visible; white-space: normal !important;
}


Additionally to wrap long header titles

For all grids
.x-grid3-hd-inner  {
    overflow: visible; white-space: normal;
}


For specific grid

#company-grid .x-grid3-hd-inner  {
    overflow: visible; white-space: normal;
}

For specific column

.x-grid3-hd-company {
     overflow: visible; white-space: normal !important;
}

Here "company" is the ID set the the ColumnConfig used for the company column.

Sanjiv

TomC.

unread,
Feb 7, 2008, 8:54:20 PM2/7/08
to GWT-Ext Developer Forum
Hi Sanjiv,

Thank you for your fast response.

I have another question on the CSS of Panel -- How to change the font
size in a Panel?

Are those CSS definition documented somewhere I can reference to? For
GWT widget, the css definition are well documented in the javadoc API.
But I cannot find such info for the Ext Components.



On Feb 7, 7:54 pm, "Sanjiv Jivan" <sanjiv.ji...@gmail.com> wrote:
> Use this to wrap all cell contents globally
> .x-grid3-cell-inner {
>      overflow: visible; white-space: normal !important;
>
> }
>
> To wrap cell contents on a certain table only, set an ID to the Grid panel
> (say company-grid) and then use the CSS
>
> #company-grid  .x-grid3-cell-inner {
>      overflow: visible; white-space: normal !important;
>
> }
>
> Additionally to wrap long header titles
>
> For all grids
> .x-grid3-hd-inner  {
>     overflow: visible; white-space: normal;
>
> }
>
> For specific grid
>
> #company-grid .x-grid3-hd-inner  {
>     overflow: visible; white-space: normal;
>
> }
>
> For specific column
>
> .x-grid3-hd-company {
>      overflow: visible; white-space: normal !important;
>
> }
>
> Here "company" is the ID set the the ColumnConfig used for the company
> column.
>
> Sanjiv
>
> On Feb 7, 2008 6:45 PM, TomC. <tomchen1...@gmail.com> wrote:
>
>
>
>
>
> > Hi,
>
> > On GWT-EXT 2.0, the GridPanel I'm creating contains text value longer
> > than the column width, how can I wrap the text into multiple lines.- Hide quoted text -
>
> - Show quoted text -

Sanjiv Jivan

unread,
Feb 7, 2008, 8:59:56 PM2/7/08
to gwt...@googlegroups.com
I'll try to incorporate the CSS definitions for each Component over time, starting with the Grid info I provided, but in the meantime FireBug is your best friend. Just inspect the element in question (like Panel header) and examine the corresponding CSS. Give it a shot..

Sanjiv

TomC.

unread,
Feb 7, 2008, 10:08:53 PM2/7/08
to GWT-Ext Developer Forum
Great! Thank you.

On Feb 7, 8:59 pm, "Sanjiv Jivan" <sanjiv.ji...@gmail.com> wrote:
> I'll try to incorporate the CSS definitions for each Component over time,
> starting with the Grid info I provided, but in the meantime FireBug is your
> best friend. Just inspect the element in question (like Panel header) and
> examine the corresponding CSS. Give it a shot..
>
> Sanjiv
>
> > > - Show quoted text -- Hide quoted text -
Reply all
Reply to author
Forward
0 new messages