[Solved] Button panel overlaps other components when form layout is used

[artem101]

When I set form layout to cclLeftToRightThenTopToBottom and my form have button panel, it looks like this: https://ibb.co/ZcRq1VX

But I wish to see this: https://ibb.co/d0b6D2T

My LFM file:

Code: Pascal  [Select][+][-]

1. object Form1: TForm1
2.   Left = 315
3.   Height = 240
4.   Top = 250
5.   Width = 320
6.   AutoSize = True
7.   Caption = 'Form1'
8.   ChildSizing.Layout = cclLeftToRightThenTopToBottom
9.   ChildSizing.ControlsPerLine = 3
10.   ClientHeight = 240
11.   ClientWidth = 320
12.   LCLVersion = '2.0.12.0'
13.   object Button1: TButton
14.     Left = 0
15.     Height = 25
16.     Top = 0
17.     Width = 68
18.     Caption = 'Button1'
19.     TabOrder = 0
20.   end
21.   object Button2: TButton
22.     Left = 68
23.     Height = 25
24.     Top = 0
25.     Width = 68
26.     Caption = 'Button2'
27.     TabOrder = 1
28.   end
29.   object Button3: TButton
30.     Left = 136
31.     Height = 25
32.     Top = 0
33.     Width = 68
34.     Caption = 'Button3'
35.     TabOrder = 2
36.   end
37.   object Button4: TButton
38.     Left = 0
39.     Height = 25
40.     Top = 25
41.     Width = 68
42.     Caption = 'Button4'
43.     TabOrder = 3
44.   end
45.   object Button5: TButton
46.     Left = 68
47.     Height = 25
48.     Top = 25
49.     Width = 68
50.     Caption = 'Button5'
51.     TabOrder = 4
52.   end
53.   object Button6: TButton
54.     Left = 136
55.     Height = 25
56.     Top = 25
57.     Width = 68
58.     Caption = 'Button6'
59.     TabOrder = 5
60.   end
61.   object Button7: TButton
62.     Left = 0
63.     Height = 25
64.     Top = 50
65.     Width = 68
66.     Caption = 'Button7'
67.     TabOrder = 6
68.   end
69.   object Button8: TButton
70.     Left = 68
71.     Height = 25
72.     Top = 50
73.     Width = 68
74.     Caption = 'Button8'
75.     TabOrder = 7
76.   end
77.   object Button9: TButton
78.     Left = 136
79.     Height = 25
80.     Top = 50
81.     Width = 68
82.     Caption = 'Button9'
83.     TabOrder = 8
84.   end
85.   object ButtonPanel1: TButtonPanel
86.     AnchorSideTop.Control = Button9
87.     AnchorSideTop.Side = asrBottom
88.     Left = 6
89.     Height = 34
90.     Top = 200
91.     Width = 308
92.     OKButton.Name = 'OKButton'
93.     OKButton.DefaultCaption = True
94.     HelpButton.Name = 'HelpButton'
95.     HelpButton.DefaultCaption = True
96.     CloseButton.Name = 'CloseButton'
97.     CloseButton.DefaultCaption = True
98.     CancelButton.Name = 'CancelButton'
99.     CancelButton.DefaultCaption = True
100.     TabOrder = 9
101.     ShowButtons = [pbOK, pbCancel]
102.   end
103. end
104.  

Is it a TButtonPanel bug or not?

[Soner]

You have to set ButtonPanel1.Align to alNone then you have what you want but ButtonPanel1 is smaller then the buttons. Also you need to set ButtonPanel1.Constraints.MinWidth.

Maybe better solution is to put buttons in a panel, then align panel and ButtonPanel1 to altop.

[wp]

I'd add a client-aligned panel for the 9 buttons and apply the childsizing settings to the panel (rather than to the form). Autosize the form.

[artem101]

Using TPanel completely satisfies me. Thank you both!