GWT TextArea in ScrollPanel in TabLayoutPanel - how to take 100% of height? - gwt

Question

Here is a miminal UI demonstrating my problem. It is the usual UIBinder boilerplate, plus the three widgets: TabLayoutPanel, ScrollPanel, TextArea. I want the TextArea to take up all the available space of the tab, and I want it to have a scroll bar if it can't fit. But this code yields a TextArea that is two lines tall. How do you fix this? Why is it ignoring the height?
In the ui.xml file:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.scrollPanel {
height: 100%;
}
.textArea {
height: 100%;
}
</ui:style>
<g:TabLayoutPanel barHeight="20" barUnit='PX'>
<g:tab>
<g:header>Text Area</g:header>
<g:ScrollPanel styleName='{style.scrollPanel}'>
<g:TextArea ui:field='textArea' styleName='{style.textArea}'></g:TextArea>
</g:ScrollPanel>
</g:tab>
</g:TabLayoutPanel>
</ui:UiBinder>
And in the Java file:
package com....client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.ResizeComposite;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.Widget;
public class BugDemoLayout extends ResizeComposite {
private static BugDemoLayoutUiBinder uiBinder = GWT.create(BugDemoLayoutUiBinder.class);
interface BugDemoLayoutUiBinder extends UiBinder<Widget, BugDemoLayout> {}
#UiField TextArea textArea;
public BugDemoLayout() {
initWidget(uiBinder.createAndBindUi(this));
StringBuilder junk = new StringBuilder();
for (int i=1; i<300; i++) {
junk.append("Line " + i + "\n");
}
textArea.setText(junk.toString());
}
}
The module file simply adds the ui to the root:
public void onModuleLoad() {
BugDemoLayout bd = new BugDemoLayout();
RootLayoutPanel.get().add(bd);

Answer 1

TabLayoutPanel and ScrollPanel both implement the RequireResize interface and automatically resize to the available space using absolute positioning.
You specified a relative height (100%) for the content inside the ScrollPanel. This doesn't work because the size in the parent isn't explicitly set (see here for more details).
So you can either:
Set an explicit size in the ScrollPanel in pixel and then set the Textarea height to 100%.
Extend the TextArea and implement the RequiresResize interface (implement the onResize() method where you set the height/width of the TextArea
The second approach is the cleaner recommend one as it also resizes the TextArea when you resize the browser window.
It would look something like that:
TextArea:
public class ResizableTextArea extends TextArea implements RequiresResize {
public void onResize() {
int height = getParent().getOffsetHeight();
int width = getParent().getOffsetWidth();
setSize(width+"px",height+"px");
}
}
You have to put your TabLayoutPanel into a RootLayoutPanel. This will ensure that there is an unbroken chain of LayoutPanels or Widgets that implement RequiresResize/ProvidesResize interfaces all the way down to your custom TextArea.

Answer 2

You're placing a TextArea inside of a ScrollPanel, but the ScrollPanel isn't necessary as the TextArea already has scrollability built-in. If you take out the ScrollPanel, it should work fine (in my testing it works).

Answer 3

I'm going to skip the sizing part of this question, but answer the scrolling part (as that never seemed to be resolved?).
I had the same problem, so I placed a ScrollPanel inside the tab, and nested an HTMLPanel within it, sized to 100% the width and height of that parent ScrollPanel. Then, I used panel.add( new HTML("my text" ) ); to populate it.
I also replaced "\n" with "<br />" in my actual long text string. (That was applicable for my needs).
Now, that's not quite the same thing as a TextArea, of course, but it does allow you to display long running scrolling text inside of a TabLayoutPanel.