I just want a plain DIV

The only way I can see to add a plain div in wappler is to add it in code.
We need to add items to a div all the time as we don’t want a row, column, flex container, container, we just want a plain old DIV!

Does wappler have an option to drop in a plain div in quickly without code un the GUI so that I can then apply styling to the div using the design panel?

To give an example I need a button and a title outside the button and I want it to be in the one object. The mess you see in the icon below is due to the fact tI have started to use relative positioning to place the “unsure” paragraph outside the button. My issue is that I really want them all within the bounds of 1 dive that I will subsequently animate. It seems inefficient to go from the GUI, to the code then back to the GUI to do simple tasks. Not to mention wappler often needs to be constantly restarted to display recent updates (for example styling).

To reiterate, how do I create a plain div and drop things in it via the visual interface to its all neatly contained in that div and I can then apply styles, animation or whatever I want to the div rather than the bootstrap defaults which are not appropriate for what I’m trying to achieve (regularly).

Screen Shot 2020-09-30 at 9.48.12 am

… you may say, why not use relative or absolute positioning?
Then I need to add margins on other sections, containers or divs just to prevent overlapping and that is inneficint and fiddly.

3 Likes

From the DOM tree tab.

1 Like

Yep, it’s available in the Dom panel.

I think the OP would like to put children in the div using the app structure panel.

Ah! Yes that is an issue.

Why not use a flex container as in

Makes it easier to horizontally and vertically position the items within it.

2 Likes

Actually because the Flex Container is a great way to align elements, we have improved its usage and made it more prominent to insert.

So it is available always next to the regular content elements like paragraph, image, titles etc.

And to make it maybe more clear to the new users, we decided to rename the “Flex Container” to “Align Container (Flex)”

So it is more clear. Do let us know if you think that is a bad idea, otherwise it will be available with the tomorrow update.

2 Likes

Will pagination generators be available in Display Blocks?

Either name works. It’s just a name.

I also wish that display blocks in flex containers had more options for width than 25%/50% and 100%. Sometimes I might have 6 display blocks in a flex container and would like the ability to set a couple at say 10%. That may be a bootstrap limitation. Not sure.

1 Like

Yes indeed these are Bootstrap 4 classes:

1 Like

A lot of Bootstrap templates are coded with a lot of div tags so I can see why this would be useful in the App structure

1 Like

Yes, this would be a nice addition to the App Structure window in my opinion.

Of course a Flex Container is a div like all the other containers, but it still behaves differently to a “plain old DIV”.

Of course we can go to the DOM window, but that is a waste of time and focus.

The App Structure window allows so many types of container that are divs in reality, I have never really understood the reason why a “plain old DIV” is not included.

1 Like

I prefer the original “Flex Container” name because that’s what it is (d-flex - with all of the defaults) but it’s not a big deal.

1 Like

It is a flex container, so let’s call it a Flex Container.

2 Likes