Re: How to Constrain the Width of a FlexTable

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.

On Friday, 21 January 2011 20:46:21 UTC+5:30, JAppetta wrote:

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)
>
> > ---------------------------------------------------------------------------­---------------------------------------------------------------------------­------------
>
> > 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;
>
> > }
>
> > --
> > 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-toolkit+unsubscribe@googlegroups.com<google-web-toolkit%2Bunsubs­cribe@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 -

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.