delphifiremonkeytmstms-web-corehorizontal-alignment

Equivalent to HorzCenter in order to horizontally center a panel in TMS Web Core?

In FireMonkey, there's a HorzCenter option for the Align property on most visual components.

What this does is it horizontally centers the component as well as sets the height to 100%.

In TMS WEB Core, I don't see the HorzCenter option for Align.

How can I horizontally center my panel in TMS WEB Core? I want to do the same as what HorzCenter does in FMX.

Solution

  • HorzCenter is not available in TMS WEB Core at all. If you want to achieve the same alignment as HorzCenter, then it needs to be custom coded.

    In the form's OnResize event, you can write the following code to do a HorzCenter align:

    WebPanel.Align := alNone;
WebPanel.Top := 0;
WebPanel.Height := WebPanel.Parent.Height;
WebPanel.Left := (WebPanel.Parent.Width - WebPanel.Width) div 2;

    This will behave exactly like HorzCenter from FireMonkey.

    Also, as of v2.4.5.0, there's a new Center property available on the TWebPanel component as well as many other common UI controls that can be used to center elements horizontally and vertically.