Hi,
I came across with a strange situation, below a chunk of code:
public class SomePanel() {
SomePanel() {
initComponents();
}
private void initComponents() {
VerticalLayout mainLayout = new VerticalLayout();
mainLayout.setFullSize();
GridLayout layout = new GridLayout(2, 1);
layout.setWidth(“100%”);
mainLayout.addComponent(layout);
layout.addComponent(new SomePanel1(), 0, 0);
layout.addComponent(new SomePanel2(), 1, 0);
SomePanel3 panel3 = new SomePanel3();
panel3.setFullSize();
mainLayout.addComponent(panel3);
setContent(mainLayout);
}
}
I expect that the inner space of SomePanel will be devided by 2 parts, and the top part will contain gridlayout with SomePanel1 and SomePanel2, and bellow will contain SomePanel3 but in reality, gridlayout lied on SomePanel entirely, and covered panel3. What’s wrong? Is it impossible to add layouts into other layouts?
Hi!
There are quite a few problems in that snippet that make it not compile, so I think you wrote it from memory instead of copy-pasting it from anywhere. Unfortunately that means that enough guesswork is needed that it’s kind of hard to say what exactly goes wrong in your actual code. A good starting point would be to add ?debug to your url and check the third tab of the third tab “Check layouts for potential problems.” – for example the most common layouting problem is to have only relative-sized components/layouts inside a layout that has undefined size, in which case the contents try to determine their size from the parent layout, and parent layout tries to determine its size from the contents. Also a good idea to check e.g. with Chrome Inspector what sizes each component actually gets, and whether you’ve possibly overlooked some layer.
Really, the original snippet of code is bellow:
private void initComponents() {
VerticalLayout mainLayout = new VerticalLayout();
mainLayout.setSizeFull();
setCaption(bundle.getString(“access_points”));
GridLayout layout = new GridLayout(2,1);
mainLayout.addComponent(layout);
layout.setWidth(“100%”);
layout.setSpacing(true);
layout.setMargin(true);
layout.setColumnExpandRatio(0, 0.3f);
layout.setColumnExpandRatio(1, 0.7f);
accessPointsPanel = new AccessPointsPanel();
accessPointsPanel.setSizeFull();
layout.addComponent(accessPointsPanel, 0, 0);
accessPointInfoPanel = new AccessPointInfoPanel();
accessPointInfoPanel.setEnabled(false);
accessPointInfoPanel.setSizeFull();
layout.addComponent(accessPointInfoPanel, 1, 0);
connectPanel = new ConnectPanel();
connectPanel.setWidth("100%");
mainLayout.addComponent(connectPanel);
setContent(mainLayout);
}
Also I attached the screenshot where you can see the strange behaviour of panels. layout is under and intersects connectPanel.
Now it compiles, sort of, but with the missing classes and the missing outer layout it’s still impossible to reproduce the issue locally. This does look a bit more like styling issue than any basic layouting issue, though. Is that ‘C’ that shows beneath the connectPanel’s contents the ConnectPanel’s caption? I.e. is the ConnectPanel itself in the correct position, but it’s contents are positioned incorrectly? Are there, say, any position: absolute; or position: relative; in the play?