Does anybody know how to resize a GWT DockLayoutPanel's child panels? When I add a directional panel I have to give it a size ie:
panel.addSouth(new HTML("south"), 2);
How can I then resize this south panel after the fact?
You can use the setWidgetSize method like this:
DockLayoutPanel panel = new DockLayoutPanel(Style.Unit.EM);
HTML html = new HTML("south");
panel.addSouth(html, 2);
// change the size of the html widget to 4em
panel.setWidgetSize(html, 4);
Related
I was wondering is there any possibility to get the inner size of a
com.google.gwt.user.client.ui.ScrollPanel
object in GWT? I would like to create a children of the ScrollPanel that fits exactly into the empty space, without activating the scroll bars.
The ScrollPanel is initialized as follows:
[begin update after answer of #Abhijith Nagaraja]
public void onModuleLoad() {
Window.setMargin("0px");
TabLayoutPanel tabs = new TabLayoutPanel(30, Unit.PX);
//attach the tab panel to the body element
RootPanel.get(null).add(tabs);
//set the TabLayoutPanel to full size of the window.
String width = (Window.getClientWidth()) + "px";
String height = (Window.getClientHeight()) + "px";
tabs.setSize(width, height);
//create the scroll panel and activate the scroll bars
ScrollPanel scrollPanel = new ScrollPanel(new Button("a second button"));
scrollPanel.getElement().getStyle().setOverflowX(Overflow.SCROLL);
scrollPanel.getElement().getStyle().setOverflowY(Overflow.SCROLL);
//attach the scroll panel to the DOM
tabs.add(scrollPanel, "tab1");
System.out.println(scrollPanel.getOffsetWidth()); // --> 0
System.out.println(scrollPanel.getOffsetHeight()); // --> 0
}
[end update]
Reason: I want to initialize a dynamic visualization (which requires scrollbars at a later point in time) in such a way that, it looks nice and avoiding to add the ScrollPanel later.
ScrollPanel sp = new ScrollPanel();
...
int innerWidth = sp.getOffsetWidth()- sp.getElement().getScrollWidth();
...
NOTE: You can use the above code only if your scrollPanell is attached to the screen. In other words it should be rendered.
DOM.setStyleAttribute(scrollpanel.getElement(), "maxHeight", mMainHeight + "px");;
I have a loading popup that I need to display on the top of the page, even if the user scroll down.
What I tried so far is to set the popup position as follows
setPopupPosition(Window.getClientWidth()/2 , 0);
The popup shows up on the absolut top.
The situation can be resolved easily if you view it from a different angle: Not the popup position should adjust to the page - instead, the page should scroll behind the centering popup, e.g.:
final ScrollPanel scrollPanel = new ScrollPanel();
RootLayoutPanel.get().add(scrollPanel);
pagePanel = new FlowPanel();
scrollPanel.setWidget(pagePanel);
pagePanel.add(...);
Now add the entire page contents to pagePanel (instead of adding them directly to rootPanel).
Then you can create popups like this:
final PopupPanel popupPanel = new PopupPanel();
popupPanel.add(...);
popupPanel.center();
You'll still have to re-center the popup when the window resizes, but apart from that, the popup will always be at the center in front of the scrolling page.
To achieve this you can implement Window.addWindowScrollHandler. It will always be on top whatever you do.
DialogBox dialog = new DialogBox();
dialog.setWidget(...);
Window.addWindowScrollHandler(new ScrollHandler() {
#Override
public void onWindowScroll(ScrollEvent event) {
dialog.setPopupPosition((Window.getClientWidth() - widthOfDialog) / 2, event.getScrollTop());
}
});
Hope this helps.. Thanks..
The solution that worked for me is this
setPopupPosition(Window.getClientWidth()/2 , Window.getScrollTop());
I need anyone to tell me how to center Grid inside the contentpanel.
I created content panel width 100% and the grid width is 50% and I need to center the grid inside the contentpanel.
thank you in advance,
You can use CenterLayoutContainer widget.
Sample code:
#Override
public Widget asWidget() {
//Your panel
ContentPanel panel = new ContentPanel();
//Đ¡ontainer with your content
CenterLayoutContainer container = new CenterLayoutContainer();
container.add(yourGrid);
//Put container into panel
panel.setWidget(container);
return panel;
}
Have a look at CenterLayoutContainer: http://www.sencha.com/examples/#ExamplePlace:centerlayout
This is for the new version, 3.0. The older 2.2.5 also has an analogous layout type.
I have a simple GWT app that takes source code in a TextArea, sends it to a remote compiler, and displays the assembly language output and compiler errors in some other TextAreas. The code below works fine in Safari and Chrome, but the TextAreas and Buttons aren't resized to fill the panels in Firefox. I can manually set the sizes of the widgets to 100% and it's almost acceptable, but surely I'm missing some important bit of CSS knowledge. I am setting the document type to the strict HTML4 DTD ("http://www.w3.org/TR/html4/strict.dtd"). The app is running at http://ferret.granberrys.us:8080/Compiler.html.
RootLayoutPanel rootPanel = RootLayoutPanel.get();
DockLayoutPanel panel = new DockLayoutPanel(Unit.EM);
codeArea = new TextArea();
codeArea.setText("int main() {return 0};");
DockLayoutPanel outputPanel = new DockLayoutPanel(Unit.EM);
ListBox compiler = new ListBox();
compiler.addItem("Clang/LLVM");
outputPanel.addNorth(compiler, 2);
assemblyArea = new TextArea();
assemblyArea.setText("Asm");
Button compileButton = new Button();
compileButton.setText("Compile");
outputPanel.addSouth(compileButton, 2);
outputPanel.add(assemblyArea);
panel.addEast(outputPanel, 20);
compilerOutput = new TextArea();
compilerOutput.setReadOnly(true);
compilerOutput.setText("Compiler");
//panel.addWest(codeArea, 800);
panel.addSouth(compilerOutput, 10);
panel.add(codeArea);
rootPanel.add(panel);
According to the documentation you should use <!DOCTYPE html>, but Iḿ not sure if that is the problem here. It also could be the TextArea is a span element, or at least not a css block element. You can do this by adding display:block to the specific widgets.
I'm using GWT 2.4. I'm trying to create a tabs panel that has multiple tabs, so many that sometimes they exceed the allotted horizontal boundaries. How can I make a horizontal scroll bar appear? Here is how I'm creating my tabs panel now ...
tabsPanel = new TabLayoutPanel(BAR_HEIGHT_IN_EM, Style.Unit.EM);
final List<ScrollPanel> tabs = new ArrayList<ScrollPanel>();
for (final Node tabNode : documentNode.getChildren()) {
// Get the tab's child widgets and add them
// into the tab panel.
final ScrollPanel childpanel = new ScrollPanel();
childpanel.setHeight(SCROLL_PANEL_HEIGHT_PCT);
...
tabsPanel.add(childpanel, tabName);
} // for
tabsPanel.setWidth("100%");
tabsPanel.setHeight("100%");
As you can see, I tried width="100%", but no scroll panels appear that allow me to see the excess tabs.
Thanks, - Dave
There is no built in way to do this with the TabLayoutPanel, but looking at it's code it is possible to do this:
SimplePanel tab = (SimplePanel) getTabWidget(0).getParent();
FlowPanel tabBar = (FlowPanel) tab.getParent();
LayoutPanel container = (LayoutPanel) tabBar.getParent();
Element tabBarContainerLayer = container.getWidgetContainerElement(tabBar);
tabBarContainerLayer.getStyle().clearOverflowX();
DISCLAIMER: untested