Relative positioning of FNC Chart

WEB TMS WEB Core
1

Hello,

I am trying to position a FNC Chart inside of a div container. But the FNC Chart keeps a absolute attibute in the span container. Here is the generated code of the positioning:

<span id="TForm2_TMSFNCChart1" zindex="0" tabindex="1" role="" style="overflow: hidden; outline: currentcolor none medium; top: 256px; left: 275px; width: 381px; height: 40px; position: absolute; box-sizing: border-box; user-select: none; font-family: Arial; font-style: normal; font-size: 8pt; color: rgb(0, 0, 0);"><canvas id="TForm2_TMSFNCChart1_Canvas" zindex="-1" style="position: absolute; height: 40px; width: 381px;" width="381" height="40"></canvas></span>

Therefore, the chart is not displayed correctly.

I have Tried the steps describes in this post: post

But the FNC Chart does not have the property ElementHandle.

I am running out of ideas.
So thanks in advance for your help.

2

Hi,

The code would be:

  TMSFNCChart1.ElementHandle.style.setProperty('position','relative');
3

Appreciated your help. Unfortunately using this Code the IDE shows that ElementHandle is an undeclared Identifier (E2003).

Maybe some additional information on what I am running will help:

IDE: Embarcadero® RAD Studio 10.4 Version 27.0.38860.1461
TMS FNC Core Version: 2.8.1.1
TMS FNC Chart Version: 1.7.6.0

Thanks again for the help.

4

Hi,

ElementHandle is an undeclared identifier, but should just compile and work.

5

Hi again, you were right that is compiles but the property of the chart is still unchanged. The problem is, that the canvas and the span of the object is still styled with style:"position: absolute", resulting in absolute positioning.

<span id="TForm2_TMSFNCChart1" zindex="0" tabindex="1" role="" style="overflow: hidden; outline: currentcolor none medium; top: 443px; left: 323px; width: 550px; height: 350px; position: absolute; box-sizing: border-box; user-select: none; font-family: Arial; font-style: normal; font-size: 8pt; color: rgb(0, 0, 0);"><canvas id="TForm2_TMSFNCChart1_Canvas" zindex="-1" style="position: absolute; height: 350px; width: 550px;" width="550" height="350"></canvas></span>
6

This means that the element is still loading. Can you try from the OnShow event:

procedure TForm1.WebFormShow(Sender: TObject);
begin
  TMSFNCChart1.ElementHandle.style.setProperty('position','relative');
end;
7

Thaks, that fixed the position property of the span, but the canvas of the FNC is still absolute. And the Chart does not show up.

8

Hi,

You also have the ElementCanvas property, to access the Canvas position. You can also apply the position there. It's unclear why the chart does not render. Can you provide your test application?

TMSFNCChart1.ElementCanvas.style.setProperty('position','relative');

9

Thanks. Manipulating the Canvas and the Element itself worked.

For someone, that searches for this particual problem:

Add the following lines to the given solution, to set the top and left property to 0 like so:

  TMSFNCChart1.ElementHandle.style.setProperty('top','0px');
  TMSFNCChart1.ElementHandle.style.setProperty('left','0px');

to set the position to the origin of the span.