- When you have set level=llv4 (which should be bootstrap4 compatible) the render in browser is wrong because:
data-bs-autohide → in BootStrap4 should be data-autohide
data-bs-delay → in BootStrap4 should be data-delay
data-bs-animation → in BootStrap4 should be data-animation
data-bs-dismiss="toast" → in BootStrap4 should be data-dismiss="toast"
in general everything without -bs- for the Bootstrap4
- In attachment prog for repro.
toast3.zip (1.7 MB)
The AutoDelete=False for deffined toast item ... when you click on the button "Show toast 1" and waiting for the hide ... and if you click again ... we have two toasts with the same content, the same for the next clicks. Should be use the same toast.item[0] ... why do they multiply?
Bootstrap did breaking changes between v4 and v5.
We adapted therefore the code to be Bootstrap v5 compatible.
Given the type of breaking changes that Bootstrap did, we do not see how to allow automatic switching of code between Bootstrap 4 and Bootstrap 5. We also thought that going forward, it would be no issue if users switch to Bootstrap 5.
Ok, I’ll try moving the app to Bootstrap 5, but what about point 2?
Did you run my example program to reproduce it? It’s already on Bootstrap 5, and looks like a straight-up bug. Were you able to reproduce it?
We could see the 2nd issue and applied a fix that will be included in the next release.
ok thank you ... btw workaround for TWeb Toast on Bootstrap 4, maybe it will be useful.
procedure TfrmDashboard.WebToastAlertsShow(Sender: TObject; AIndex: Integer;
AElement: TJSHTMLElement);
var AttributeValue: String;
CloseBtnElement: TJSHTMLElement;
begin
if((Sender as TWebToast).Level=llv4)then
begin
if((AElement.hasAttribute('data-bs-delay')))then
begin
AttributeValue := AElement.getAttribute('data-bs-delay');
AElement.removeAttribute('data-bs-delay');
AElement.setAttribute('data-delay',AttributeValue);
end;
if((AElement.hasAttribute('data-bs-autohide')))then
begin
AttributeValue := AElement.getAttribute('data-bs-autohide');
AElement.removeAttribute('data-bs-autohide');
AElement.setAttribute('data-autohide',AttributeValue);
end;
if((AElement.hasAttribute('data-bs-animation')))then
begin
AttributeValue := AElement.getAttribute('data-bs-animation');
AElement.removeAttribute('data-bs-animation');
AElement.setAttribute('data-animation',AttributeValue);
end;
CloseBtnElement := TJSHTMLElement(AElement.querySelector('button'));
if(Assigned(CloseBtnElement) and (CloseBtnElement.hasAttribute('data-bs-dismiss'))) then
begin
AttributeValue := CloseBtnElement.getAttribute('data-bs-dismiss');
CloseBtnElement.removeAttribute('data-bs-dismiss');
CloseBtnElement.setAttribute('data-dismiss',AttributeValue);
end;
end;
end;