Cannot apply margin or padding for Modal elements

[DavidI]

Hello there - I’ve created a modal for a contact form, and I can’t seem to get any margin or padding applied to the individual elements (such as: Text Input, where I have 4 of those in a row for name, email, so on). For lack of a better term, they’re squished together vertically, and stretched to the sides of the form.

I’ve tried dragging and adjusting the yellow/green padding bars, with a given element selected, doesn’t work (for me). I’ve tried adjusting SPACING in the Properties pane, dragging it to 5 or auto or anything, it has no effect. Using Bootstrap 4, custom CSS, App Structure.

When I created one before, it worked just fine.

You can barely see in these images that the outline/border curves a bit - but it’s cut off because they’re effectively overlapping. It’s unreadable and unusable. I’m so close… any help is appreciated!

Any suggestions? Images attached.

[ben]

Try:

Edit: The example is for Bootstrap 5. You may need to adjust for Bootstrap 4

[DavidI]

Thanks for the quick response. I’ve tried selecting elements individually, or collectively (the group, as you show there) but nothing seems to have any effect. Seems like it’s locked somehow.

I am on bootstrap 4, and should mention I’m using a pre-designed template (which I’ve gotten all the way to where I want it now, and followed the steps to point to the proper custom paths).

Earlier (a few days ago) these commands worked on the modal. I was almost done and just needed to make the modals send their data via email, and saw I had to configure a Server Model. I added node.js (wasn’t sure which server model to try, wish I’d have selected something else) to try getting these modals to send that email; the modal’s elements were properly spaced prior to that, and I believe these settings worked prior to selecting node.js too… but I didn’t modify them much, because at that point they were spaced and rendered just fine. Adding node.js as the model messed everything up - rendering the site didn’t work, elements stopped working properly, and the linux subsystems that started installing failed. Ugh.

So I copied the index.html page into a new directory, along with all the supporting files and folders, and started a new project from that point. I’m sure that complicates things and makes it messy… I probably have hidden files that were changed with node.js being selected that are still in the directory or file that are causing this problem. Sorry, that’s the only thing I could think to do without losing a bunch of work.

I’ve even tried creating a new modal (just to redo the whole modal, in hopes it would fix it) but the result is erratic - Wappler behaves strangely (I can’t modify the new modal, focus keeps jumping out of the modal, adding elements doesn’t work). I suspect somehow my settings are messed up.

I’m almost done with the site, and don’t want to start from scratch. This is the last element. I’ll likely need to add a Server Model to send the contents of the filled-out modals via email, and will likely use PHP. Long messy problem, I know. Any suggestions would be most welcome! Thanks in advance.

[ben]

@DavidI

I’m using a pre-designed template

If the template was not created using Wappler, then you may run into problems. Many templates that I have seen, were mal-constructed. This may not be so in your case, but the fact that margins and padding have no influence on the design, points to irregularities in your code.

@DavidI

So I copied the index.html page into a new directory, along with all the supporting files and folders, and started a new project from that point

This is a big no-no. You create either, a PHP or a NodeJS project. I prefer NodeJS but you need to consider if the remote host can accommodate it.

@DavidI

I was almost done and just needed to make the modals send their data via email, and saw I had to configure a Server Model. I added node.js

NodeJS is server side, the problems that you are having are on the client (browser). In other words, adding the language should have no effect on your modal.

My suggestion: Upload the current broken site to a temporary location and give us a link to the site. That way we can have a look at it.

[DavidI]

Thanks again for the quick and helpful reply, Ben. Understood about using a template rather than starting from scratch; it was working perfectly well before enabling NodeJS, so I think it’s okay.

I do have a full backup from a couple weeks ago, so I believe I can pick up from that point (pre-NodeJS) with a new project, and not lose too much. I do get that NodeJS is on the server side, but it was without question that event (adding NodeJS) that made things go south. Could’ve been that it didn’t install properly, that I didn’t read enough guidance first, that sort of thing.

I’ll start with restoring the backup, so I don’t unreasonably take up anyone’s time with something I can fix - and thanks a bunch for the offer to look at it!

And while I have you ( ): is it possible to send modal form data to an email destination (as in, capture the contents of a filled-out modal when someone hits a “Submit” button) without having to configure a Server Model? That might make my life a little easier…

Thanks again!

And just for comparison, here’s how it looked before:

[ben]

@DavidI

is it possible to send modal form data to an email destination without having to configure a Server Model?

No. Sending emails require a mail server. PHP has its server as has NodeJS.

[DavidI]

Okay - thanks.

UPDATE - I was able to grab that backup (prior to enabling NodeJS), do a diff of a few files to capture updates, and now I’m up and running again. I’ve selected PHP as the Server Model, and everything is back to normal (the modals look good).

Also, I was able to get most of the way through submitting modal information through email.

Thanks a bunch @ben for your help and quick responses!

[ben]

Welcome to the fold