I want to align the positions of components in code.

I want to align the positions of components in code.

For example, there are 5 components.
(e.g. WebImageControl, WebEdit, WebButton...)

If you try to sort by code in the WebFormShow() event as shown below,
It doesn't sort as intended.

However, when I hit refresh, it sorts as intended.
Is it because the page is sorted before it loads?

To sort the components...
In which event should I write code?

procedure Tfrm_Main.WebFormCreate(Sender: TObject);
begin
//
end;

procedure Tfrm_Main.WebFormShow(Sender: TObject);
begin
CompoInit();
end;

procedure Tfrm_Main.CompoInit();
begin

//-----
btnJoin.Left := (Width div 2) - (btnJoin.Width div 2);
btnJoin.Top := Height - btnJoin.Height - 70;

//-----
pnlInfo.Left := (Width div 2) - (pnlInfo.Width div 2);
pnlInfo.Top := btnJoin.Top - pnlInfo.Height - 20;

pnlInfo.Color := clWhite;

//-----
imgHp.Width := Width - 30;
SetImagePerBaseWidth(imgHp, imgHp.Width, true);

imgHp.Top := pnlInfo.Top - imgHp.Height - 20;

//-----
imgTop.Height := imgHp.Top;
SetImagePerBaseHeight(imgTop, imgTop.Height, true);

//-----
txtHp.Left := imgHp.Left + 8;
txtHp.Top := imgHp.Top + 8;
txtHp.Width := imgHp.Width - 16;
txtHp.Height := imgHp.Height - 16;

txtHp.Color := clWhite;

end;

These are absolute positioned controls?
You use the Align property set at design-time? If so, try to set Align AFTER you have set the Top property for all of these controls.

Used in runtime.

This is because the screen size is unknown at design time.

Depending on the size of the user's screen, I want to make the control size look different.

In some cases, I've added the code to the main form's "resize" event handler. And in the most troublesome cases, added a timer that calls this same resize event maybe 100ms after the page loads. IE, set the timer interval to 100 and enable it in WebFormCreate. May not be the best way as it kind of masks whatever the problem actually might be, but maybe it will help?