Elements Inserting Elsewhere on Page

See the video included with this post. When I click the Add After button and add something - it tends to be inserted somewhere else on the document. It does it on both of my computers. Any thoughts? It only does it on some elements or after some elements.

video.mp4 (10.2 MB)

That is strange indeed. I get that all the time but only with form elements. Perhaps in your case you have some broken HTML in there somewhere?

What happens if you try on a blank page?

It doesn’t do it on a blank page. I have some javascript in the head. I wonder if that is causing an issue? Spaces are intentional below on script tags so the code shows.
< script >
$(’.nav-tabs > li > a’).hover(function() {
< /script >

You can try removing it and see. However, I think it is more likley an HTML problem on the page that is confusing Wappler.

I’m not seeing any errors anywhere. On the tabs - I put a section in each tab. And the tabs are in a section. I wonder if that is confusing it? I don’t see any reason not to do this though - as each tab is a section and the entire tab element is a section on the page.

Removing the nested sections fixed the issue. I don’t see any practical reason this should be an issue though.

Though nothing in the tabs is showing on the App panel now.

Yeah sounds like you have some messed up HTML structure there.

Do you have a link to the page you can share?

Not at the moment. The issue isn’t the code. It is the rules of Bootstrap 4 or what Wappler thinks those rules should be. So for instance - if you create a tab nav - you cannot insert a container->row->column inside one of the tab panes. It won’t show that option to you.

However, you can add a section, because it shows that - and then you can add the container->row->columns. However, Wappler doesn’t seem to think that sections can be nested - which is confusing it. I tested nested sections on a different test page.

The reason it thinks this is because sections aren’t “style” tags and are not meant to be used like a div tag. However, I think that in the case of a tab nav element - sections should be allowed because they are independent content in each tab. And if not sections, then definitely columns (inside row and container).

I don’t see any documentation in Bootstrap 4 or JS for not putting columns there correctly. So maybe there is a way around this - or not…

@George @Teodor any thoughts?

You should be able to add regular div tags instead of a section in the DOM Panel? I can see not allowing Sections as that really isn’t the use for them but you would think it would allow containers/rows/columns.

1 Like

I agree on sections, except for the fact that you can’t add columns otherwise. My real push here is columns in tabs - not sections (sections were just a workaround). I’m going to start a movement. We’ll be largely ignored by the media as we camp outside Wal-Mart, but we’ll feel empowered.

The issue with adding a div tag is that it won’t show up in the App panel - which means ANYTHING added inside that div won’t show up. I’m fine with that - but this is a demo site for Wappler that I’m building for video tutorials. So it needs to look good, and be easy enough without going into the DOM. At least not for the front page.

I would certainly vote for columns etc in tabs. Perhaps it is just an oversight and got missed by the Wappler Team?

1 Like

Yeah, hopefully. I don’t see any reason we can’t do that. I mean having a image to the left and a paragraph to the right inside a tab seems pretty ordinary. I’ll make a post on the vote requests area. Thanks Brad!

1 Like

So your request and sure we can add those.

Just as a background explanation - in Wappler each framework has its own set of rules that specify how elements can be nested and what is allowed and what not. This is to prevent user from making wrong structure.

Of course the rules are not perfect and there are combinations that we might have missed :slight_smile: so just report them - if they make sense we will sure add them!

1 Like