So, I bought the Hyper 2.0 Dashboard from the bootstrap theme page, but the problem I’m having is that when I add the App Connect Local to the page, it breaks. I don’t understand why really.
This is the page before adding app connect:
This is the page after:
I don’t understand why, because the routing seems right, and the when I run the inspector it doesn´t retrieve me any error at all:
I found something even more weird…
For example, if I´m running the page (with the app connect integrated) using an smaller screen, where the left menu gets hidden, and I open it, it works right
If I expand to a normal size desktop, it continues working right. The problem seems to appear when the page is loaded in the normal size desktop and the left side menu is not hidden.
Hello,
It would be better if you provide a link to your page, so we can check what’s wrong.
Maybe some js/jquery conflict affecting CSS. BS4 premade templates make extensive use of js in their demo pages.
Check body id and app connect id
I quess you changed body id
I’ve just uploaded it:
See my comments here for things you might need to do when using a Bootstrap template.
https://community.wappler.io/t/importing-bootrap-4-theme-components-problem/13744/4?u=kfawcett
Hi Carlos,
Not sure if this is the reason but the page source looks broken in that I can see closing BODY and HTML tags more than once in the page body.
Best regards,
Brian
I'm checking this out. How do I change from jQuery slim to full blown?
For the css file, I don't think this is the problem.
I don’t understand. Where do you see multiple closing body and html?
I’m using php include for the topbar menu. But this isn’t an error, besides, wappler would have shown me that kind of mistake.
Hi Carlos,
When I reviewed the page source in the web browser, I saw the multiple closing tags. These may be present in the include files?
Best regards,
Brian
As @brian mentioned, the are several <body> tags and other duplicated sections:
I don’t know why - perhaps it’s a bug - but Wappler will typically do this if you paste external code into code view. I imagine there is a problem analysing the tags. If you correct the code and remove the repeated code, Wappler will often regenerate it as soon as you save the file. If this happens, you’ll need to edit the code in a text editor and then open it in Wappler. That usually does the trick.
I don’t think the multiple body tags are Wappler related.
Probably the template include files are not properly created. Is your template using PHP includes? If yes, what do they include exactly?
Yes, I replace the template divs from html to php and turn the divs to php include files. The file includes the topbar menu
It starts from line 20, you have a stray doctype along with stray head and html tags on line 21.
Line 22 has another charset which is not allowed. You have a head closing tag on line 23. Line 24 the body opens again, and on line 478 you have code after the closing HTML tag.
I’d advise starting again and pasting in the template in sections. It is much easier to debug.
That body certainly wouldn’t be the problem. However there are three opening body tags - I searched for ‘<body’ - and of course two of them shouldn’t be there.
So, I don’t understand what everyone is marking out.
For a better understanding of the problem, I uploaded one page that includes the app connect and the other doesn’t have it installed.
With app connect installed: http://estudiobts.com.ar/v2app/admin/pages-starter.php
Without app connect (no errors): http://estudiobts.com.ar/v2app/admin/pages-starter-noapp.php
The errors that others have mentioned can be seen here: https://validator.w3.org/nu/?doc=http%3A%2F%2Festudiobts.com.ar%2Fv2app%2Fadmin%2Fpages-starter-noapp.php. This is for the page without App Connect.
Furthermore, this is the style rule in the section of your document:
<style>body.loading {visibility: hidden;}</style>
which means that the rendered document remains hidden until some action takes place. My assumption is that these two JavaScript files manipilate the DOM
<script src="http://estudiobts.com.ar/v2app/admin/assets/js/vendor.min.js"></script> <script src="http://estudiobts.com.ar/v2app/admin/assets/js/app.min.js"></script>
This is exactly what App Connect also does (manipulating the DOM). In other words App Connect and the two linked JavaScript files seem to be incompatible.
Wow, that’s a lot of errors for a paid template. Doesn’t seem worth the hassle.
Body is missing a class named “sidebar-enabled”. App connect is probably overwriting that. And that class is probably toggled when viewport is desktop or when a hamburger icon is clicked on mobile.
