Please see attached screen capture.
How do I set the various parameters to get all the components to scale and be responsive.
I could not upload a video so I have done some screenshots showing the responsivegrid not showing correctly.
I added the anchored panel from the anchor sample and this behaves ok.
Also the responsivegrid & anchored panel do
side1.zip (12.3 KB)
not show at first I have to resize the browser window
Sorry just noticed in wrong place. How do I move it.
I have a test bootstrap app a sidemenu and a pagecontrol. When I click on the page control it disappears.
Not sure if it is anything to do with my issue above.
Unit1.zip (52.1 KB)
Hi,
The WebPageControl is associated with "Item 1" in the TWebSideMenu. So the WebPageControl1 will only be displayed when that item is selected.
The project you provided related to the responsive grid issue contains a lot of unrelated components, connections, etc.
Can you please try to isolate the issue with the responsive grid in a sample project so I can further investigate this?
Hi Bart
The 2nd example is a simple example.
When run and I click on item1 it shows the tab control incorrectly. When I click on another tab it disappears.
Updated project
Unit1-2.zip (9.9 KB)
Is this a bug? I don't seem to be able to get it display correctly
Create a new css project.
added 3 stretch panels. On the 3rd panel add a page control.
It does not show correctly. Cannot select any of the tabs. No errors in the console.
Can you place the WebPageControl inside a WebPanel? Then select the WebPanel as the ContentControl of the WebSideMenu item.
It gets cut off by the TForm1_TabSheet8
If I change the border & backgroung colour to transparent in the inspector it looks ok
<span id="TForm1_TabSheet8" zindex="0" tabindex="-1" style="border-style: solid;border-width: 1px;border-color: transparent;overflow: hidden;padding: 0px;box-sizing: border-box;background-color: transparent;outline: none;top: 20px;left: 0px;width: 793px;height: 567px;position: absolute;-webkit-tap-highlight-color: transparent;white-space: nowrap;display: inline-block;" role=""><div><span id="TForm1_Panel9" zindex="0" class="card" tabindex="-1" role="" style="overflow: hidden; white-space: nowrap; padding: 0px; box-sizing: border-box; justify-content: center; align-items: center; top: 144px; left: 256px; width: 238px; height: 124px; position: absolute; display: flex;"><div class="card-body"><span>WebPanel1</span></div></span></div></span>
How do I set this on form create ?
I got this working
procedure TForm1.PCSheetCompanyDetailsClick(Sender: TObject);
begin
SetPageControlTransparent;
end;
procedure TForm1.SetPageControlTransparent;
var
i: Integer;
begin
// Set the PageControl background to transparent
PCCompany.ElementHandle.style.setProperty('background', 'transparent', 'important');
PCCompany.ElementHandle.style.setProperty('border', 'none', 'important');
// Loop through each TabSheet and make it transparent
for i := 0 to PCCompany.PageCount - 1 do
begin
PCCompany.Pages[i].ElementHandle.style.setProperty('background', 'transparent', 'important');
PCCompany.Pages[i].ElementHandle.style.setProperty('border', 'none', 'important');
end;
end;
on create
SetPageControlTransparent;
but when I change tabs it reverts back