Feature Request - All Types of Div to Appear in App Structure Window

Feature Request
#1

I sense there is an inconsistency in the way the app structure works…

If I have a div which is a bootstrap row, column, container or flex container, then it appears in the App Structure.

But if I have a div which is just a plain boring old div with no association to BS4 then it gets missed out of the app structure.

Since sometimes in a row I mix divs and columns to get the layout behaviour I want, then I keep getting confused as to whether a div is present or not. I know I can go to the DOM window, but I don’t want to have to keep switching windows and losing my place.

So this request is that all divs, of whatever type, are shown in the App Structure window!

#2

I wouldn’t have thought the way the App Structure panel works is inconsistent; the limitation you describe - divs which are not related to BS4 don’t appear in the tree - is consistently applied. This hasn’t struck me as a problem, and there is some advantage in having a less cluttered tree, but I appreciate that switching between the App Structure and DOM windows would be a nuisance.

I hardly ever use the DOM window (perhaps I should), but I always use Wappler in split view, so can see at a glance any extra divs or spans etc. which are not displayed in the tree. If you don’t work like this, it might be worth trying.

2 Likes
#3

The App Structure panel only shows the Bootstrap 4 and App Connect components and that’s for a reason. That’s how it works and that’s how it is supposed to work.

We don’t want a huge App Structure tree, filled with all the divs, spans and other generic HTML elements so that’s why there is the DOM tree which shows them.

#4

Thanks for your input @Teodor! I can see it feels important to you that this is the best way for the app structure window to work.

Of course, a Feature Request is by nature something asked for which is different to how you have designed Wappler, so I still feel my request is valid. I can see that for the detail of a span then the DOM window is the way to go, but in HTML, the div tag is the most common tag of structure, and the BS4 containers are all implemented as div tags, so my request seems very logical to me.

However if in the meantime I want to use a div tag and have it appear in the app structure window, I guess I could use a Container of type Fluid and remove the padding on it… would there be any other way in which that would behave which would be different to just a plain div tag?

Best wishes,
Antony.

2 Likes
#5

Why not just use the bootstrap 4 structure rows/columns?

#6

It’s a long story, but for the behaviour I want, I need a row which contains 2 plain divs and a column!

Well here is a bit more detail… it is for a row which has 2 columns which are permanently 30px wide and a third column which fills the rest of the space.

#7

Divs are also selectable within the tag selector at the bottom of the design window.

#8

Yes, but I get confused when I can’t see them in the app structure, where they are equal in hiearchical importance to the column!

#9

You can use Bootstrap rows/columns for this, but you will need to create an extra style to apply to the 30px columns, eg:
.w-30 { flex: 0 0 30px; }

1 Like
#10

Hey thanks @TomD, that worked really well! I had been taking the col property off the column to achieve the same effect but also losing the column status in the app structure at the same time.

2 Likes