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 <[email protected]> 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 > > [email protected] > > > > > > > > On Wed, Jan 19, 2011 at 9:30 AM, JAppetta <[email protected]> > 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 [email protected] > <javascript:>. > > > To unsubscribe from this group, send email to > > > [email protected] <javascript:> > <google-web-toolkit%2Bunsubs[email protected] <javascript:>> > > > . > > > 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/google-web-toolkit. For more options, visit https://groups.google.com/d/optout.
