FlexTable : how to get not wrapping text functionality

[Suren]

Hi All,

I am using FlexTable in a grid format to display text. I have a
situation like, the width of the particular column needs to be fixed.
And in that case, I need to show whatever text is fit into that width.
I dont want to use wordwrap, which inturn affects my layout. Or I dont
want to display the full lengthy text too.

I 've tried
[code]
FlexTable f1 = new FlexTable();

f1.setText(0, 0, "This is a very long text");
f1.setBorderWidth(2);
f1.getCellFormatter().setWidth(0,0,"2px");
f1.getCellFormatter().setWordWrap(0, 0, false);
[/code

In the above case, I set the wordwrap to false, but still I am getting
the wrapped text in the Flextable

Could anyone please suggest any ways to acheive this?

Thanks
Suren

[Danny Schimke]

Hi Suren!

I dont know why this is not working, but you can use a Label, set the word wrap of the label to false and add this label to one of your FlexTable's cell. This should work.

-Danny

2009/3/30 Suren <nsure...@gmail.com>

[Suren]

Hi Danny,

Thanks for the reply.

I should have mentioned earlier that, I 've tried that option too.
that is, I set the text to a label and disable the wordwrap to that
label and add that label to a FlexTable using setWidget method.

Result the same..

Still I am getting either full long text with the increased width, or
wrapped text with the proper width.

All I want is some knid of truncated text( to appear like truncated
text, but actually not, since that cell dont have enough space to
display that)

I have a doubt here. Did Flextable has the default settings to adjust
the column width according to the text's length? And wrap the text if
the width is set?

If so, what if I dont want that functionality? I mean how can I
disable that? apart from the wordwrap method

Thanks
Suren

On Mar 30, 11:55 am, Danny Schimke <schimk...@googlemail.com> wrote:
> Hi Suren!
>
> I dont know why this is not working, but you can use a Label, set the word
> wrap of the label to false and add this label to one of your FlexTable's
> cell. This should work.
>
> -Danny
>

> 2009/3/30 Suren <nsurendi...@gmail.com>

>
>
>
>
>
> > Hi All,
>
> > I am using FlexTable in a grid format to display text. I have a
> > situation like, the width of the particular column needs to be fixed.
> > And in that case, I need to show whatever text is fit into that width.
> > I dont want to use wordwrap, which inturn affects my layout. Or I dont
> > want to display the full lengthy text too.
>
> > I 've tried
> > [code]
> > FlexTable f1 = new FlexTable();
>
> >        f1.setText(0, 0, "This is a very long text");
> >        f1.setBorderWidth(2);
> >        f1.getCellFormatter().setWidth(0,0,"2px");
> >        f1.getCellFormatter().setWordWrap(0, 0, false);
> > [/code
>
> > In the above case, I set the wordwrap to false, but still I am getting
> > the wrapped text in the Flextable
>
> > Could anyone please suggest any ways to acheive this?
>
> > Thanks

> > Suren- Hide quoted text -
>
> - Show quoted text -

[Danny Schimke]

In standard a table wraps your text. You could try to add a the following CSS class to the cell (td- element of the table), that should not wrap its text.

.no-wrap {
  white-space: nowrap;
}

In the following example- HTML the text is not breaking although the table has a width of 100px. The Table's width will grow up.

<table class="non-wrapping-table"width="100px" border="1">
  <tr>
    <td class="no-wrap">
      to long text, to long text, to long text, to long text
    </td>
  </tr>
</table>

If you want to say, that the complete table should not wraps its text you can do it with CSS, instead of adding the no-wrap CSS class to each td element.

.non-wrapping-table tr td {
  white-space: nowrap;
}

hope that will help...

-Danny

2009/3/30 Suren <nsure...@gmail.com>

[Suren]

Hi Danny,

Thanks for the reply.

Yes I agree with your statement on the table and CSS style. But here
my problem is that, how I can use that with the FlexTable,

When I try to apply the style with the flexTable, I still get the
wrapped text

:(

Thanks
Suren

On Mar 30, 1:13 pm, Danny Schimke <schimk...@googlemail.com> wrote:
> In standard a table wraps your text. You could try to add a the following
> CSS class to the cell (td- element of the table), that should not wrap its
> text.
>
> .no-wrap {
>   white-space: nowrap;
>
> }
>
> In the following example- HTML the text is not breaking although the table
> has a width of 100px. The Table's width will grow up.
>
> <table class="non-wrapping-table"width="100px" border="1">
>   <tr>
>     <td class="no-wrap">
>       to long text, to long text, to long text, to long text
>     </td>
>   </tr>
> </table>
>
> If you want to say, that the complete table should not wraps its text you
> can do it with CSS, instead of adding the no-wrap CSS class to each td
> element.
>
> .non-wrapping-table tr td {
>   white-space: nowrap;
>
> }
>
> hope that will help...
>
> -Danny
>

> 2009/3/30 Suren <nsurendi...@gmail.com>

> > > - Show quoted text -- Hide quoted text -

[rudolf michael]

that's because your text is wrapped inside a div and not inside the td of the table.
you either use setHTML instead of set widget and keep the style on the felx table td or if you're using setWidget then you need to apply the stylename on the label and not the td of the flex table.

[Magius]

I achieved to avoid the word wrap after a long session with google and
trying different things. And only for IE!
Tables are old elements of HTML with a lot of css-options to render.

I did several things, probably some of them are not needed, I expect
to not have forgot anyone.

In my widget constructor, I tried and finally commented (my widget
extended FlexTable) :
// DOM.setStyleAttribute( this.getElement( ), "word-wrap", "normal");
// DOM.setStyleAttribute( this.getElement( ), "white-space",
"nowrap");

For the 1st row (header)
getRowFormatter( ).setStyleName( 0, "table-header");

For each row:
getRowFormatter( ).setStyleName( j, "table-row");
getCellFormatter( ).setWidth( 0, j, width); /* I fixed
each column here, in the header cells */

For each cell:
getCellFormatter( ).setWordWrap( i, j, false);
getCellFormatter( ).setWidth( i, j, "100%");
label = new Label( text);
label.setTitle( text);
label.setStyle( "table-cell");

And the css:
.table-cell{
white-space: nowrap;
overflow: hidden;
}
.table-row {
white-space: nowrap;
...
}
.table-row td,th{
white-space: nowrap;
overflow: hidden;
}
.table-header {
white-space: nowrap;
...
}
.table-header td,th {
white-space: nowrap;
...
}
.table{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
table-layout: fixed;
margin-left:auto;
margin-right:auto;
.....

}



On Mar 30, 12:45 pm, rudolf michael <roud...@gmail.com> wrote:
> that's because your text is wrapped inside a div and not inside the td of
> the table.
> you either use setHTML instead of set widget and keep the style on the felx
> table td or if you're using setWidget then you need to apply the stylename
> on the label and not the td of the flex table.
>

[Suren]

Thanks Magius and Rudolf for the reply.

I should mention that I have a very little exposure to GWT,

Here, what I have is a simple code using a FlexTable

[code]
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.RootPanel;

public class Thinclient implements EntryPoint {
public void onModuleLoad() {

FlexTable f1 = new FlexTable();

f1.getCellFormatter().setWidth(0,0,"2px");

f1.setText(0, 0, "This is a very long text");
f1.setBorderWidth(2);

RootPanel.get().add(f1);

}
}

[/code]

I 've tried using widget(Label), HTMLText to achieve the not wrapping
functionality.

But somehow,somewhere, something I am missing with the above suggested
implementation and so its getting either wrapped or displayed the full
text. I want the text that only fit to the width. Rest can be hidden.

Kindly advise me to acheive my requirement.

Thanks
Suren

[Suren]

Hi All,

Atlast, I did as Rudolf suggested,

here is code below to achieve non wrapping the text in FlexTable using
a Widget

{

FlexTable f1 = new FlexTable();

Label l1 = new Label("This is a very long text");
l1.setWidth("20px");
f1.setWidget(0,0, l1);
f1.setBorderWidth(2);
RootPanel.get().add(f1);

}

And in the CSS, I set the style for only Label

.gwt-Label {
overflow: hidden;
white-space: nowrap;
color: cyan;
}

And this is working absolutely fine.

I would like to know, how I can achieve the same without using widget
in a FlexTable. I tried the same as Rudolf suggested, but not getting
the expected result.

Any help would be appreciated

Thanks
Suren

[rudolf michael]

Hello Suren,
Find below the code that should work for you without using set widget inside a flex table.

FlexTable f1 = new FlexTable();

   f1.setHTML(0, 0, "This is a very long text");
   f1.getCellFormatter().setStyleName(0, 0, "felxtabletd");

   l1.setWidth("20px");
   f1.setWidget(0,0, l1);
   f1.setBorderWidth(2);
   RootPanel.get().add(f1);

.css file
.felxtabletd {

       overflow: hidden;
       white-space: nowrap;
       color: cyan;
}

as you can see above, if you firebug it the css class is now on the td. and no DIVs anymore inside your flextable.
Usually you should apply the css inheritance in here for the tables and its TDs but i am not a css expert.

[Suren]

Hi Rudolf,

Thanks for the reply.

Is there anything to be modified or added in your code posted above.
Because as you mentioned, the code is not giving the expected result.

Here is what I have ...

FlexTable f1 = new FlexTable();
f1.setHTML(0, 0, "This is a very long text");
f1.getCellFormatter().setStyleName(0, 0, "felxtabletd");

f1.setBorderWidth(2);
RootPanel.get().add(f1);


.css file
.felxtabletd {
overflow: hidden;
white-space: nowrap;
color: cyan;
}

This is not working for me :(

Any thing I am missing out here ...please advise.

Thanks Suren

> ...
>
> read more »- Hide quoted text -

[rudolf michael]

Hello Suren,
since you have a fixed width on your table then you need to wrap the text inside another html tag so it can be wrapped.
keep the code as it is and try this
f1.setHTML(0, 0, "<font class=\"felxtabletd\"> This is a very long text</font>");

[Suren]

Hi Rudolf,

Ok I agree with that I have the fixed width, but see below what I have
now,

FlexTable f1 = new FlexTable();

f1.setHTML(0, 0, "<font class=\"felxtabletd\"> This is a very long
text</font>");

f1.setBorderWidth(2);
RootPanel.get().add(f1);

Even now its is not working..

Thanks
Suren

On Apr 1, 1:32 pm, rudolf michael <roud...@gmail.com> wrote:
> Hello Suren,