"ResizeObserver loop limit exceeded" using AppStack bootstrap template

WEB TMS WEB Core
1

Hello.

I'm using TMS WebCore last version (1.9.1) with Delphi Seattle and I´m trying to integrate the responsive template from getbootstrap:

So far I have follow all steps from documentation and the example in demo. I can run it, but I get the following error on Chrome (Versión 96.0.4664.45 (Build oficial) (64 bits)):
ERROR
ResizeObserver loop limit exceeded |
at http://localhost:8000/Project1/Project1.html [0:0]

The template works ok without Web Core, of course.

How can I solve this situation? For me it is a showstopper, cause I use the template on other platforms (namely asp.net webforms!) but I can not use it on web core.

Thanks for any advice. I´m sure I am missing something.

2

How exactly did you use/integrate this template in your TMS WEB Core project?
Did you put the JS lib references in the project HTML and then the HTML template in the form1 HTML file?

3

Thanks for your answer. I think I found the problem when writing a reply.
I had this project1.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta $(ThemeColor)>
    <noscript>Your browser does not support JavaScript!</noscript>
    <link rel="icon" href="data:;base64,=">
    <meta $(Manifest)>
    <title>TMS Web Project</title>

	<link rel="canonical" href="https://appstack.bootlab.io/dashboard-saas.html" />
	<link rel="shortcut icon" href="img/favicon.ico">

	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">

    <script type="text/javascript" src="$(ProjectName).js"></script>
    <style>
    </style>
  </head>
  <body>
<meta $(BodyParameters)>
  </body>

  <script type="text/javascript">
    rtl.run();
  </script>

  <script src="js/app.js"></script>

</html>

And the html template on Unit1.html (snipped for clarity purposes). DFM almost empty:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="Responsive Bootstrap 5 Admin &amp; Dashboard Template">
	<meta name="author" content="Bootlab">

	<title>SaaS Dashboard | AppStack - Admin &amp; Dashboard Template</title>

	<link class="js-stylesheet" href="css/light.css" rel="stylesheet">
</head>
<body data-theme="default" data-layout="fluid" data-sidebar-position="left" data-sidebar-behavior="sticky">
	<div class="wrapper">
		<nav id="sidebar" class="sidebar">
-----8<-----8<-----8<-----8<-----8<-----8<-----8<-----8<-----8<-----8<-----8<----- 
			</footer>
		</div>
	</div>

	<!-- Originally the template js script is called here: --> 
        <!--<script src="js/app.js"></script> -->

</body>

</html>

The problem was the line in unit1.html:


    <link class="js-stylesheet" href="css/light.css" rel="stylesheet">

If I put this line in the project1.html, it seems to work.

Thanks again.

4

Not sure what exactly css/light.css and/or js/app.js do, but indeed moving it to the project HTML to ensure it is already loaded when the form's HTML file is loaded often solves such dependencies.

5

Yes. In this particular bootstrap template they are (afaik):
css/light.css: file with the stylesheet selecting the theme used by the template (light.css, dark.css, etc).
js/app.css: where all javascript code of dynamic items of the template is (hamburguer menu, loading some images, etc).

I found that the js/app.css is mandatory to be at the end of the project.html file, after rtl.run(). I think this way, the page is loaded before the code of the template runs.

I write it here, in hope it helps someone with this problems with AppStack bootstrap theme.

Thanks again. I´m sure I will post my experience with TMS Web Core.