How to Constrain the Width of a FlexTable

[JAppetta]

I am attempting to limit the size of a FlexTable and its cell.
However, whenever an exceptionally large piece of text is added to the
cell, the table grows to accommodate this. Not a desirable action. I
want to limit the size of the table and have additional text be
displayed on following lines similar to as if I had newlines in the
text string.

Following the code that creates the main panel as well as the panels
added to the main panel. Note that an attempt is made to constrain the
width of the table (650 px) in the method and constrain the width of
the panel that contains the table in the .css (700 px).

Thanks for your help!

(Working with GWT 1.6)

------------------------------------------------------------------------------------------------------------------------------------------------------------------

private Panel createCommentsPanel() {
// create comments main panel
VerticalPanel mainCommentPanel = new VerticalPanel();
mainCommentPanel.setStyleName("mainCommentPanel");

Label commentsLabel = new Label("Comments:", false);
commentsLabel.setStyleName("createBuildLabel");

Label addCommentLabel = new Label("Add Comment:", false);
addCommentLabel.setStyleName("boldLabel90");


// comments table
String[] commentTypeHeaders = {"Comments" };
commentsTable = new FlexTable();
createFlexTable(commentsTable, commentTypeHeaders);
commentsTable.setWidth("650px");


// add button
VerticalPanel buttonPanel = new VerticalPanel();
buttonPanel.setStyleName("addCommentsButtonPanelPadding");
addCommentButton = new Button("Add Comment");
addCommentButton.setStyleName("addEditButtons");
addCommentButton.addClickHandler(this);

//call method to add the comments to the table
addCommentsToTable(buildModel.getCommentsList());

//add components to the panels
VerticalPanel Panel = new VerticalPanel();
Panel.setStyleName("commentsPanel1");
Panel.add(commentsTable);
Panel.add(addCommentButton);



mainCommentPanel.add(commentsLabel);
mainCommentPanel.add(Panel);
mainCommentPanel.add(buttonPanel);

return mainCommentPanel;

}


Following is the relevant .css

//the main panel that contains the labels and the panel that contains
the FlextTable. Width set to 100%
so as to be in sync with other panels of the application
.mainCommentPanel {
border: 2px solid inset silver;
width: 100%;
height: 100%;
background-color: #F0F0F0;
}



//the panel that contains the FlexTable. Note that the width is set to
700px (slightly larger than the flex table width setting)


.commentsPanel1 {
padding-top: 10px;
padding-left: 25px;
padding-bottom: 15px;
width: 700px;
height: 100%;

}

//padding around the button. Can't see how this would affect the table
but including for completeness
.addCommentsButtonPanelPadding {
padding-bottom:10px:
padding-left: 25px;

}

[John LaBanca]

Set the "table-layout" CSS property to "fixed", then set the width of the table to 100%.  The content should be truncated.  You can also set the width of each column to an exact value.

Thanks,
John LaBanca
jlab...@google.com

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[JAppetta]

John:
Thank you for taking the time to examine my post. The suggestion you
offered works well for truncating the text. However, I
was looking to simply wrap the text onto the next line and that
doesn't happen when I set the tabel-layout property to fixed for the
FlexTable
and change the width to 100%. After noting that I experienced
truncation instead of wrap, I resumed my original settings and tried
setting the cell width to an exact value. The solution works if a
space occurs in the text before the column width is exceeded. However,
if I type a continuous stream of characters without a space, the table
grows to accommodate the characters instead of wrapping to the next
row.

On Jan 19, 10:13 am, John LaBanca <jlaba...@google.com> wrote:
> Set the "table-layout" CSS property to "fixed", then set the width of the
> table to 100%.  The content should be truncated.  You can also set the width
> of each column to an exact value.
>
> Thanks,
> John LaBanca

> jlaba...@google.com

>
>
>
> On Wed, Jan 19, 2011 at 9:30 AM, JAppetta <Jennifer.Appe...@sas.com> wrote:
> > I am attempting to limit the size of a FlexTable and its cell.
> > However, whenever an exceptionally large piece of text is added to the
> > cell, the table grows to accommodate this. Not a desirable action. I
> > want to limit the size of the table and have additional text be
> > displayed on following lines similar to as if I had newlines in the
> > text string.
>
> > Following the code that creates the main panel as well as the panels
> > added to the main panel. Note that an attempt is made to constrain the
> > width of the table (650 px) in the method and constrain the width of
> > the panel that contains the table in the .css (700 px).
>
> > Thanks for your help!
>
> > (Working with GWT 1.6)
>

> > ---------------------------------------------------------------------------­---------------------------------------------------------------------------­------------

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs­cr...@googlegroups.com>
> > .

> > For more options, visit this group at

> >http://groups.google.com/group/google-web-toolkit?hl=en.- Hide quoted text -
>
> - Show quoted text -

[Shubham Sonawane]

Hi JAppetta,

Just use below styling for flexTable and your issue would be solved:

table-layout:fixed; //Fixed table layout thus it would be restricted to max set table width like 100% of screen.
word-wrap:break-word; //Wrap the text without truncating any string which would be inside table layout.

Thanks & BR,

Shubham Sonawane.

> > google-web-toolkit+unsub...@googlegroups.com<google-web-toolkit%2Bunsubs­cri...@googlegroups.com>