Margins in group boxes are not correctly set

WEB TMS WEB Core
1

I have a groupBox in which I put a panel and I am using margins to position that panel. During the development, I noticed small differences in the margins. To illustrate the problem, I have used three different margin settings: at design time, they look perfect, but at runtime, there is a difference.

Here is the design screen:
DesignTime

And here the runtime results:
RunTime

And finally, the small program showing these results:
PanelInGroupBox.zip (7.0 KB)

It seems that the margins at the left and at the bottom are not correctly set. Note that the dimensions of the panel at design time and at runtime are the same.

2

Your outer squares (the colored squares) are TWebGroupBox components? Looking at the HTML that is generated, there's an extra element added which I think is messing with things and is in fact the element that provides the background. If you try using a TWebPanel instead of a TWebGroupBox in the same fashion, for example, the margins work the way you'd expect.

If you adjust the width and height of this other element manually, things look normal again. I can't say if it is by design or maybe a bug or not (someone from TMS will surely chime in here). A TWebGroupBox is different from a TWebPanel in other ways of course. But here's a workaround for you. I don't know what this does about those other aspects, so please adjust to suit.

  1. Add an ElementID value to the TWebGroupBox. Eg, for WebGroup4, set it's ElementID to 'WebGroupBix4'.
  2. In your Show event, add this to directly set the size of the troublesome element:
procedure TForm1.WebFormShow(Sender: TObject);
begin
  Lbl_RT1.Caption := IntToStr(WebPanel1.Width) + 'x' + IntToStr(WebPanel1.Height);
  Lbl_RT2.Caption := IntToStr(WebPanel2.Width) + 'x' + IntToStr(WebPanel2.Height);
  Lbl_RT3.Caption := IntToStr(WebPanel3.Width) + 'x' + IntToStr(WebPanel3.Height);

  asm
    document.getElementById('WebGroupBox4').firstElementChild.style.width = '100%';
    document.getElementById('WebGroupBox4').firstElementChild.style.height = '100%';
    document.getElementById('WebGroupBox4').firstElementChild.margin= '0px';
  end;

 end;

Things should square up nicely. There are about a dozen other ways to do that, so if you don't care for that approach I'm sure there are others :slight_smile:

image
image1255×576 112 KB

3

Thank you for the feedback.

Yes, the colored squares are TWebGroupBox components and no, I am not using them, as I am using TWebPanel components instead. I just saw the problem while checking if I could use them as a container.

The reason why I created this topic is that I suspect a bug and I don't want to use workarounds in case I would decide to use a TWebGroupBox component.

I agree that your solution gives the expected results, but I also think that a component must give predictable results when using its available properties.

4

Absolutely!