The content control (such as the TWebPanel) assigned to the item ContentControl is not rendered correctly. The TWebPanel has the Align set to alClient but when rendered when selected from the menu only displays at the size of the original size of the form at design time. The TWebPanel should be resized to the width and height of the client area of the browser.
The TWebSideMenu normally should automatically set the ContentControl as client aligned. There should be no need to set Align to alClient.
Did you compare this with the demo we created and that is included?
Bruno,
I inspected the html elements and it seems the container control spans the client area but the contained controls do not even when set to alClient. If I increase the form size at design time the contained controls uses that size. Here is the code used to create the menu taken from the example:
procedure TUploadForm.CreateMenu;
var
it: TSideMenuItem;
begin
MainMenu.BeginUpdate;
MainMenu.Appearance.ItemFont.Color := clSkyBlue;
MainMenu.Appearance.ItemSelectionStyle := itsRounded;
MainMenu.Items.Clear;
it := MainMenu.Items.Add;
it.Text := 'Upload Video';
it.Hint := it.Text;
it.ContentControl := DropZonePanel;
it.MaterialGlyph := 'upload';
it.MaterialGlyphType := mgOutlined;
it := MainMenu.Items.Add;
it.Text := 'Manage Video';
it.Hint := it.Text;
it.ContentControl := ManageVideoPanel;
it.MaterialGlyph := 'video_library';
it.MaterialGlyphType := mgOutlined;
it := MainMenu.Items.Add;
it.Text := 'Instructor';
it.Hint := it.Text;
it.ContentControl := InstructorPanel;
it.MaterialGlyph := 'group';
it.MaterialGlyphType := mgOutlined;
it := MainMenu.Items.Add;
it.Text := 'Play Video';
it.Hint := it.Text;
it.ContentControl := VideoPlayPanel;
it.MaterialGlyph := 'play_arrow';
it.MaterialGlyphType := mgOutlined;
MainMenu.SelectedItem := 0;
MainMenu.EndUpdate;
end;
Rendering with side menu:
Rendering without side menu:
Inspection of Container Control:
With this information, I cannot reproduce this problem.
See test project. The panels are placed properly as by design.
Project2.zip (5.8 KB)
Again, I would like to ask to check first if you can reproduce this yourself based on just the limited information you provide and ideally, isolate this and provide a sample source project + steps with which we can reproduce the problem. All the guesswork is time-consuming for us and delays an adequate answer/solution for you.
Bruno, the TWebPanel which is the container is handled correctly as the attached pictures showed. However, the controls in the container are also set to alAlign but are not rendered correctly as shown in the pictures. You can see the difference in the rendering with and without the side menu. I will try to create a project for you to reproduce.
Make sure that for the content control, ElementPosition = epIgnore, HeightStyle = ssAuto, WidthStyle = ssAuto