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
On Mar 31, 1:40 am, Suren <[email protected]> wrote:
> 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
>
> On Mar 30, 7:53 pm, Magius <[email protected]> wrote:
>
>
>
> > 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 <[email protected]> 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.
>
> > > On Mon, Mar 30, 2009 at 11:52 AM, Suren <[email protected]> wrote:
>
> > > > 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 <[email protected]> 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 <[email protected]>
>
> > > > > > 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 <[email protected]> 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 <[email protected]>
>
> > > > > > > > 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 -- Hide quoted text -
>
> > > > > - Show quoted text -- Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -
>
> - Show quoted text -
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
