Questions about Margin/Padding controls

I don’t have this. I’ve been putting off tweaking elements because I didn’t understand how this works.

I have that for the spacing for all my elements with no options for different views.

I’m using Bootstrap 4 United. Tried going to vanilla bootstrap but that didn’t work either.

Can someone point me in the right direction please!

Thanks.

The options appearing in the dropdown list were replaced by the spacing widget in your screenshot. Having selected an element, drag the relevant side of the rectangle, eg:

image

… would add these classes:

image

It works very well (though it would be nice to be able to use the arrow keys to change the numbers too).

Ugh, really!?!? It’s very finicky and I have to drag multiple times to get it right. In my opinion it’s unusable. If I have to fight with this for every element I’ll go mad! I

Also, no options for different views (mobile, tablet, desktop etc.)?

Very sad Wappler here. :frowning:

What do you mean exactly?

Well, there are - at the top of the Wappler window. The responsive styling is added to the currently selected view.

That’s good about the responsive styling!

Here’s a video showing what happens. Recording #4.mp4 (612.5 KB)

Maybe it’s just me but Pinegrow’s method is way easier.
Recording #5.mp4 (281.4 KB)

Pinegrows has a similar drag option - as well as the selection via menus you show. It’s a good solution. However I think Wappler’s UI is generally easier to use. It seems it’s necessary to scroll quite a bit with Pinegrow to find CSS properties etc. (but it may just be that I’m not very familiar with how to use it).

Generally I like Wappler a lot beter than Pinegrow (although I’ve not used it much). It’s just this one thing that’s super annoying for me. I suppose I’ll get the knack of it eventually but it would be nice to have the drop downs.

That is indeed not how it is supposed to work! The values should be changing smoothly on one drag. We are going to check this.

Cool. Thanks. FYI I tried the drag option in PG and it was smooth so it’s not a mouse issue on my side.

1 Like

Another thing which may not be working as it should: I’m pretty sure that previously, making changes to padding and margins would be reflected in Design View instantly. It isn’t any more; the change is shown when you release the mouse button. I could be wrong or it could be to do changes to the way the new syncing works. Not much of an issue anyway, and it updates as soon as you make a keystroke in code view.

2 Likes

We are going to check this and improve it.

1 Like

This is actually non-functioning for me now. If I click on one of the selectors the value changes by moving the mouse around but I can’t select a value. margin.mp4 (408.0 KB)

Hey Heather, i am having the same issue with margin and padding, until it gets fixed I am just manually adding the same classes as Wappler would normally add for me, as it seems the only way around it currently.
Take a row as an example, it already has a class of row so I am just adding a space after and adding what i need such as mt-5
For a full list of available spacing classes please look at https://getbootstrap.com/docs/4.4/utilities/spacing/ as a temporary measure.

2 Likes

Thanks for that! I’m glad to know I’m not the only one and that link is perfect to tide me over until it’s fixed!

2 Likes

This has been fixed in Wappler 2.5