How do I change the Tab Position in a TWebPageControl component?

Question

I've added a TWebPageControl component to my form with three tabs, but the tabs are aligned to the top:

Is there a way to align the tabs to the bottom or left side instead of the top?

---

I want to achieve something similar to the TabPosition property on the TTabControl component from FireMonkey:

If I set TabPosition to Bottom in TTabControl:

How can I do this or something similar in TMS WEB Core with the TWebPageControl in order to position the tabs on the bottom instead of the top?

Answer 1

Okay. This took forever to figure out. I could not find a property or method to change the position of the tabs. So I had to write my own function to change the position. It's not perfect, but it's kind of working.

Here's a function that changes the Tabs' position to the bottom:

procedure ChangePageControlTabsToBottom(aPageControl: TWebPageControl);
var
  jsPageControl: TJSHTMLElement;
  jsPageControlTabs: TJSNode;
begin
  jsPageControl := aPageControl.ElementHandle;
  jsPageControlTabs := jsPageControl.getElementsByTagName('ul').item(0);
  asm
    jsPageControlTabs.style['position'] = 'absolute';
    jsPageControlTabs.style['bottom'] = '0';
  end;
  aPageControl.ActivePage.ElementHandle.style.setProperty('top', '0');
end;

All you do is pass your TWebPageControl component into the procedure as a parameter and then it will align your tabs to the bottom:

And here's a function to change the tabs to be left aligned:

procedure ChangePageControlTabsToLeft(aPageControl: TWebPageControl);
var
  jsPageControl: TJSHTMLElement;
  jsPageControlTabs: TJSNode;
  jsPageControlTabLinks: TJSNode;
  ulWidth: String;
begin
  jsPageControl := aPageControl.ElementHandle;
  jsPageControlTabs := jsPageControl.getElementsByTagName('ul').item(0);
  asm
    jsPageControlTabLinks = jsPageControl.getElementsByTagName("a");
    for (let i = 0; i < jsPageControlTabLinks.length; i++)
        jsPageControlTabLinks[i].style['min-width'] = '0';
    jsPageControlTabs.style['writing-mode'] = 'vertical-lr';
    ulWidth = jsPageControlTabs.getBoundingClientRect().right + 'px';
  end;
  aPageControl.ActivePage.ElementHandle.style.setProperty('top', '0');
  aPageControl.ActivePage.ElementHandle.style.setProperty('left', ulWidth);
end;

The issue with the TWebPageControl component though is that it keeps changing the properties every time you switch to a new tab or if the form resizes. So you need to call ChangePageControlTabsToBottom(WebPageControl); in these events also:

• Form's onCreate event
• Form's onShow event
• Form's onResize event
• Every TabSheet's onShow event