WebResponsiveGrid add components

WEB TMS WEB Core
1

I want to place an extra component (webMemo) on a WebResponsiveGrid with the following code:

procedure TForm1.WebResponsiveGrid1ItemCreated(Sender: TObject; Index: Integer);
var
btn: TButton;
opm: TWebMemo;
begin
opm := TWebMemo.Create(Self);
opm.ParentElement := WebResponsiveGrid1.items[index].ElementHandle;
opm.Width := 200;
opm.Height := 75;
opm.Left := 0;
opm.Top := 0;

btn := TButton.Create(Self);
btn.ParentElement := WebResponsiveGrid1.items[index].ElementHandle;
btn.Caption := 'Select';
btn.OnClick := ButtonClick;
btn.Left := 0;
btn.Top := 0;
btn.Tag := Index;
end;

Unfortunately I get the memo and the news button in the right place with the top and left properties. How can I position different components?

2

Typo: Last line should be: Unfortunately I do not get the memo and the button in the right place with the use of the top and left properties.

3

By default, it gets inserted with relative positioning.
To have absolute positioning, set control.ElementPosition = epAbsolute

4

I changed the code in:

procedure TForm1.WebResponsiveGrid1ItemCreated(Sender: TObject; Index: Integer);
var
btn: TWebButton;
begin
btn := TWebButton.Create(Self);
btn.ElementPosition := epAbsolute;
btn.ParentElement := WebResponsiveGrid1.items[index].ElementHandle;
btn.Caption := 'Select';
btn.OnClick := ButtonClick;
btn.Tag := Index;
btn.Top:= 0;
end;

but the button stay in the same place

5

What is "at the same place"?
Now I see you only add one control where in your first question you added 2 controls?

6

I still place two components. But what I mean is that if, for example, the property btn.Top
is changed (e.g. btn.top := 0), then there is no change in the gui regarding the position. So adjusting the top property of the other control also has no effect. The controls remain in the same place (regardless of which property I set)

7

We've investigated this deeper.
You would need to set the position of the DIV elements in the TWebResponsiveGrid to responsive via CSS.
You can do this via
TJSHTMLElement(ElementHandle).style.setProperty('position', 'relative');

For the next update, we did an improvement to have this happening automatically.

8

I'll try it, thanks for your response