Why doesn't Wappler recognize bootstrap elements in the App Structure?

OS info

  • Operating System : Mac OSX 17.7.0
  • Wappler Version : 1.2.4

Problem description

If I use an existing Bootstrap 4 template, Wappler doesn’t update the App Structure with the correct bootstrap elements.

Steps to reproduce

  1. Create a blank page
  2. Add Bootstrap (cdn) to the page
  3. Copy any source code () from a standard bootstrap page.
  4. Try this one: https://getbootstrap.com/docs/4.0/examples/dashboard/
  5. Replace the body element of the page.
  6. Refresh the App Structure, notice the difference from creating all the rows, cols etc via Wappler tools.

Looks like you haven’t added App Connect to the page?

Hi Tina,

You can’t just copy a peace of bootstrap code and expect Wappler to pick it up.

Wappler follows strict rules of bootstrap elements nesting to prevent the user from making mistakes and also to give context sensitive choices of elements allowed to be added at the selected place.

So if you have a valid complete bootstrap page it will work, but just a partial code unfortunately not.

Hi George.
The page I sent you as an example must be considered valid code as it is from the Bootstrap site. Pure Bootstrap 4.

Assuming you made some adjustments to the relevant paths etc., it should display fine in Wappler - but I agree, it would be nice if more of the structure were accessible via the App Structure panel. I’m not sure why it isn’t.

Here’s a modified version of the file you referred to (with different paths and the custom css put in the head section to keep things simple):
dashboard_template.zip (3.3 KB)
There’s quite a lot that App Connect doesn’t recognise (but it seems to display it without any problem).

We follow indeed a pretty strict bootstrap include path for detecting the exact bootstrap version.

Usually when using bootstrap CDN links it should be all fine, but if it is a local include it has to match our path otherwise it won’t be detected so just need to be changed.

Also if bootstrap structures are wrapped too much in unnecessary divs or custom containers they won’t be recognized.

We will be improving that in the future though.

1 Like

I hadn’t noticed that the link was to the Bootstrap 4.0 version of the template. However, I’ve just tried with the current version and I don’t think it makes any difference.

Many of the elements are not picked up in the App Structure - eg the links on the left, or the table. I would have thought this was pretty standard Bootstrap (it should be, given the templates are examples on the Bootstrap site).

I appreciate that it won’t be feasible for every element to be recognised and that some will only be accessible via the DOM panel. However, I expect new users may be disappointed if they load an existing file or template and much of it doesn’t seem to be useable with Wappler.

I recently worked on a page where very little of the content was accessible via App Structure (it used a series of <dt> and <dd> elements) - but Wappler was still the best tool for the job (IMO).

1 Like

Exactly my point.
Why doesn’t wappler recognize at least table, td’s, div.row or div.col?

Wappler does recognize them when they are nested in known structure.

Yes wappler doesn’t like that and i wish you guys give more freedom to the users in this area.

1 Like

I think this is a difficult one, because for users that are a little more knowledgeable in coding and development, we know if we are doing something which should not really be done, but even though we are still going to do it because we have tested and it works fine for our purposes.
For a brand new user, lets say a designer who has never coded a line and knows very little about web development, they are going to need very strict rules and very strict structure and Wappler gives that now. They control what a user should and should not add into a container and those elements would be different to what they allow to be placed into a row or a column.

So here is my wish and this might be a big pain for the Wappler guys, how about rather remove some of the restrictions, and when I try add an element into the incorrect container, a warning comes up saying, are you sure you want to do this…

Or if easier, like in DreamWeaver, there were different environments, like basic, coder, advanced. What if Wappler had a similar preference, Designer = very restrictive App Structure, while Developer has a much looser set of rules. Is that even a possibility.

2 Likes

I agree with Paul. I get the reasoning behind the restrictions, however, I think it makes it much more complicated when there is no way to know exactly what you might be doing wrong. Telling people to go to Bootstrap’s website to learn about what they are doing wrong isn’t a good solution. Maybe just have a triangle warning icon on that item in the app panel, and if they click it - a message tells them why that is triggered.

I also think the restrictions need to be lifted a little or that the user can change a setting on the restrictions. Like a beginner, intermediate, and advanced user preference.

1 Like

exactly! But I get your point that advanced users need more control. We just have to find the perfect balance :slight_smile:

Well although that sounds like a good idea - specially with Bootstrap it might not always work - because Bootstrap allows almost everything and the browser renders it. So there is not a 100% wrong or right here.

2 Likes

I assumed that there were not exacty restrictions - it was just that Wappler only recognises the structures it has been programmed to recognise and ignores any others. If this is correct, then I think it needs to recognise more tags/nesting etc. (and I’m sure it will). It would be good to make sure that everything is recognised in the templates/examples on the Bootstrap website as people would reasonably expect these to work (I assume they don’t have syntax errors.)

If this is not the case, then I would agree that having options to select the level of ‘strictness’ would be a good idea - and warnings about errors would be a good idea too.

I haven’t used it much, but Pinegrow recognises any HTML (valid or not) as far as I know. However it warns you if you make errors or try to save a file with invalid markup. I think this would be a good solution. Eg:


3 Likes

Perhaps an “Expert Mode” option which lifts the restrictions?

2 Likes