Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is happening because when you add another component to a FlowLayout it resizes, thus increasing its own height, which pushes the bottom component below the visible area. There is nothing in the code which shrinks the center component, such that the bottom component stays in its original place.</p> <p>One more thing is that you are using FitLayout for contentPanel which contains 3 components, a FitLayout is used for Containers with only one component inside, which is supposed to fill out its parent.</p> <p>You need to consider the following:</p> <p>1) Use RowLayout, which allows a much better control on how components should be laid out</p> <p>2) Decide on which component are you willing to place a vertical scroll bar, since you are adding components dynamically.</p> <p>For your current requirement the following code should suffice:</p> <pre><code>public void onModuleLoad() { final Viewport viewport = new Viewport(); viewport.setLayout(new FitLayout()); // final ContentPanel contentPanel = new ContentPanel(new FlowLayout()); // contentPanel.setHeaderVisible(false); final LayoutContainer topContainer = new LayoutContainer( new FlowLayout()); final Button buttonOne = new Button("Top:One"); topContainer.add(buttonOne); // contentPanel.setTopComponent(topContainer); final LayoutContainer centerPanel = new LayoutContainer(new FitLayout()); centerPanel.add(new Button("Center")); // contentPanel.add(centerPanel); final LayoutContainer botPanel = new LayoutContainer(new FlowLayout()); botPanel.add(new Button("Bottom")); // contentPanel.setBottomComponent(botPanel); final ContentPanel panel = new ContentPanel(); panel.setHeaderVisible(false); panel.setLayout(new RowLayout(Orientation.VERTICAL)); panel.add(topContainer, new RowData(1, -1, new Margins(4))); panel.add(centerPanel, new RowData(1, 1, new Margins(0, 4, 0, 4))); panel.add(botPanel, new RowData(1, -1, new Margins(4))); viewport.add(panel, new FlowData(10)); RootPanel.get().add(viewport); // Later, add a second button to the topComponent ... Scheduler.get().scheduleDeferred(new ScheduledCommand() { @Override public void execute() { final Button buttonTwo = new Button("Top:Two"); topContainer.add(buttonTwo); // Doesn't show up at first. panel.layout(true); } }); } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. COThe FitLayout in my contentPanel only has one child: The center button. The "topComponent" and "bottomComponent" are separate. Well, you changed the code to not use "setTopComponent" and "setBottomComponent" at all - and that works, because it doesn't use the topComponent/bottomComponent feature of ContentPanel. (The temporary solution I implemented to work around the issue is similar to yours.) However, I do want to use the topComponent/bottomComponent feature, because it's used everywhere else in the existing code of the project I'm working on - and the layout should work with it, too.
      singulars
    2. COIn your existing code do you dynamically add widgets to top or bottom components? I am asking this because top and bottom containers do not participate in layout after the contentPanel has been rendered. When you manually resize the browser window, onResize is called and it adjusts the height. One thing that you can try, if you insist on using top and bottom components is to call set size method on the panel, by dynamically getting the height and width.
      singulars
    3. CO@Swapnil: In the existing code, adding widgets to top/bottom component wasn't necessary so far. But the GXT documentation doesn't say, that you can't add widgets dynamically there, so it was assumed, that this would work. Now, with our workaround (i.e. no top/bottom component), the styling is a little bit different (plus some other minor issues). The original styling can be imitated manually, but this is not a very clean solution. / I just tried `contentPanel.setSize(contentPanel.getWidth(), contentPanel.getHeight());` - doesn't work unfortunately. Any other ideas?
      singulars
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload