GWT Layout Issues

Question

I have such a Layout structure: 1) First, lay out the SimpleLayoutPanel main (green border) 2) I want to add the DockLayoutPanel child to the main one (red border, 25px fields)

I implemented this, but the result shown in the application (.jpg) is strange for me. Thus, all red (upper, left, right, lower) borders of the child should be inside main , but the child panel shifts. How can I implement this logic correctly? I have a more complex ui structure with level 3-4. And I also do not work without fields.

And here is the code and css:

SimpleLayoutPanel panel = new SimpleLayoutPanel(); panel.setStyleName("mainModulePanel"); SimpleLayoutPanel p = new SimpleLayoutPanel(); p.setStyleName("moduleBody"); panel.setWidget(p); initWidget(panel); //CSS .moduleBody { /*width: 100%; height: 100%;*/ margin: 0px; width: 100%; height: 100%; border: 3px solid red; } .mainModulePanel { /*margin-top: 5px; margin-bottom: 5px; margin-right: 5px;*/ border: 3px solid green; } 

Answer 1

This is due to the definition of html for the border!

Let me explain this with an example.

Your DockLayoutPanel is 500x500px. You put in it a child element with 100x100%, where the margin, fill and border are 0px. Your item will have a size of 500x500px. No, you give it a 3px border. This means that 3px is added to the height and width. Thus, your item has a size of 506x506 pixels. Overflow is ignored.

As a result, you will get a second image.

This is the correct html behavior and has nothing to do with GWT!

Answer 2

I solved the problem by removing the 100% height and width of the .moduleBody CSS. Thus, in order to avoid such a situation, u should not determine the size of the child at 100% height and width. Thanks guys!