Alignment problem or bug

WEB TMS WEB Core
1

hI,
I have a main panel with others N panel inside it.
The main panel must be centered the form.
I used the function WebPanel.ElementHandle.Style.SetProperty for setting css properties "margin-right" and "margin-left" to Auto and I set the ElementPosition on epIgnore.
In this mode, the main panel is centerd to form but the panels inside it stay aligned to left.
I tried to set at panels inside it the property ElementPosition on epIgnore and I tried to set "margin-left" and "margin-right" like the panel main, but the panels' contents stay aligned to left.

How can I align at center the main panel with all components inside it?

I attach a little demo of an example what I want to do.

Demo_Align.zip (1.6 MB)

2

Either do positioning/layout with classic VCL approach, i.e. Align, Anchors, Top,Left or with CSS.
You are trying to mix both here and it is not designed to be used this way. If you use CSS, please control everything with CSS and set ElementPosition = epIgnore and Align = alNone.

3

Well, ok.
If I want use later the new Responsive Component (beta) I must use the VCL Approach.
Question: how obtain always a centered panel (with other components inside) , also when user resize browser widow?
Thanks

4

Drop a panel on the form.
This will show an always centered panel in the browser:

procedure TForm1.WebFormResize(Sender: TObject);
begin
  WebPanel1.Left := (Width - WebPanel1.Width) div 2;
  WebPanel1.Top := (Height - WebPanel1.Height) div 2;
end;

Alignment within this panel will be based on alignment rules for the child controls.

5

:grinning:
Of course, that's the first solution I tried, the more "Delphi" one.
I thought there were properties to set, not via code.
(I often forget that the Delphi code in Tms Webcore is converted to Javascript and then the code is executed directly on the client, not on server side).
OK thanks