How to add a simple DIV

One of the most simple and basic things in web design is adding a basic div. The only way to do it in Wappler is in the DOM Tree. However, once added you can’t do anything with it.

Can’t even add content inside?
Can’t show or hide the div based on a database value?

Frustrating the most simplest of things cannot be done in Wappler.

1 Like

Brad with the DOM Tree you can add any DIV’s and SPAN’s you want. I just ried it and you can add a DIV and then a second one inside it with no problems. If you want content you can add a P tag or what ever other tag you want.

What kind of content do you need to add inside? If you add a P tag or a H tags they will become inline text editable in design view as well on double click.

I know I can add it through the DOM tree as I mentioned.

It does not show up in the App Structure therefore cannot add any content within it. Yes, I can add more elements using the DOM tree, but you can’t assign any dynamic attributes or anything to the Div.

Here is what I need to do:

Have a Div with some content in it. A few paragraphs and other data from a database recordset/query. I want to hide the div if the recordset is empty. There is no way to select the div in design view to be able to use the dynamic attributes in the properties panel.

Also the elements added through the DOM don’t show up in Design View so everything once you add a div from DOM Tree you have to hand code in code view.

Brad - App Structure is really for components only (that is why it is called App structure). We won’t show there every possible div and span - it will become just a copy of the DOM tree …

As for the dynamic attributes and events in the DOM Tree - we will be adding those to the DOM Tree inspectors in the next update

Alright, I guess I wait.

Please download and install v 1.0.1 - the issue is fixed now:

George, a div is the most simple basic component and I feel we shouldn’t have to leave app structure to add a div. I hope you consider this as it’s quite a frustration for others too.

Still waiting!!

After banging my head against the wall for 5 months, I’m firing up a VM and going back to an old copy of Dreamweaver. Everyday I have about an hour to sit in front of Wappler and try to figure out how to undo all of the spacing that these Bootstraps add. I really just want a blank page, that I can add divs to, along with all of the server behaviors. The way it used to be. I spend 2 minutes clicking those blue + icons and 45 minutes trying to figure out what piece of css is causing some padding that I don’t want. I usually just have to open it in Chrome, then use the developer extension because Wappler doesn’t want to show you parts of the minified css. It’s infuriating.

I’m feeling the same way as you do, Every style I want to add I need to manually go to the css file and add body so it will bypass bootstrap and using chrome dev to actually be able to change the styles with live preview (coz I can’t see the bootstrap styles in Wappler), it’s a mess…
I wish Wappler would be like Webflow with all the logic and data :slight_smile: It has the potential to kill all other low and no code products.

That’s a 3 years old topic, a LOT of things have changed in Wappler in the past 3 years. If you have any specific issues using it, the please share them in separate topics.