Am I missing something or is the spacing element just frustrating to use?

Wappler General How To
,
#1

I am fairly new to Wappler and getting to know how the design elements work. But I have to say one thing I find really frustrating is the Padding and margin element. So maybe I am missing something?

At the month you have to drag your mouse up down left or right to increase or decrease spacing / margin etc and using a Mac its not the most easy thing to manipulate.

Is there a way of manually inputting the spacing number. For example, why can’t we just click on the “-” which then makes the input available and we just type in a “4”. Or is there some other way of not having to drag the mouse around to get the spacing right.

Thanks!

spacing
spacing786×474 21.4 KB

#2

Hello,
What issues do you have with the spacing control? There isn’t nothing more required than click + drag up and down / left and right.
Can you maybe make a short video showing any issues you are having?

#3

Hey @Teodor thanks for the quick reply ! It’s not an issue of such just awkward to use and if using a Mac touch pad even more awkward to get the number right quickly. From a user point of view it would be good if there was an option to just click just add the number, or even better just click on a "+’ or “-” symbol to increment up or down . Of all the controls it’s just seems to be the one which is the most awkward.

Not a criticism, just think it is a usability issue that could be addressed by just adding an easier point and click option, not everyone uses a mouse all the time.

So was wondering is there a manual way of accessing the setting.

Cheers!

#4

You can use the spacing classes you want in the class input for your element. Example:

mb-4 will add margin bottom 4
px-3 will add padding left and right 3
pt-2 will add padding top 2

etc.

#5

Yep that makes sense, didn’t even think about having the code up at the same time.

That spurred me to look it up and found this very useful: https://getbootstrap.com/docs/4.4/utilities/spacing/

Thanks!

1 Like
#6

No need for code view, just place it in the Properties section

image
image433×515 14.5 KB

1 Like
#7

Thanks @ben that’s exactly what I was looking for! Cheers.

1 Like
#8

Yep it is very handy using spacing manually in the class property. Because you can use extra functionality like…

Using x, y or no specifier at all. mx-2 adds a margin of 2 left and right. m-2 adds a margin of 2 on all 4 sides. my-2 adds a margin of 2 top and bottom.

Responsive spacing. Sometimes it is easier to use the responsive specifiers in the class property, than clicking into the different views and using spacing utility eg. I’ll write “my-2 my-md-3” in the class property. This quickly give me a tighter view on mobile and spreads out on the larger screen of tablet and above.
If done using the spacing utility you will have “mt-2 mb-2 mt-md-2 mb-md-2” which is far more confusing to read later (not clean code) and a lot more clicking around.

1 Like
#9

Good to know! Now I know I can add these manually I don’t think I will go back to using the other method.