How to set multiple margins in the property panel?

[vdweyer]

1. I need to set both bottom-margins and horizontal-margins for different sizes.
   It seems that this is not possible in the property panel as just 1 margin is presented.

For setting multiple margins I have to enter them in the Code-view.
Why not using the DW-way by using the 4 margins?

2. Why the margin-settings are restricted to 5 ?

[norcoscia]

Hi vdweyer - I just started with Wappler a few weeks ago so I might not be understanding your question - apologies in advance if this does not help or is not germane.

Would using the experimental design panel resolve your issue - you turn it on in global settings (under system) and then you can set just about anything. Hope this helps…

Norm

[vdweyer]

Thank you, this is new for me . I am going to work on this.

[vdweyer]

This panel works. However it creates an inline style setting which is not responsive to different viewports.

I like to work with the properties panel in design view but with more options for multiple margins on different viewports. Am I a demanding person ???

[psweb]

This is something Wappler is already aware of and will be extended further however maybe not the way you might imagine.

Think of the properties panel as a way to easily get to all the pre built Bootstrap 4 framework tools they provide out the box. Bootstrap 4 only allows for 1, 2, 3, 4, 5 as their margin or padding classes they use.
More info on this can be found here

Spacing

If you are looking for very fine granular adjustment then you are going to need to use the design panel or the styles panel which will by default add inline styles to your elements, but allows you to adjust your margin/padding to whatever you desire.

If you link an external style sheet from the styles panel then these adjustments will be added in the style document you assign, and not be inline.

Hope this small amount of info helps, it is a large subject that i could write another 3 pages on, so i will stop here.

[vdweyer]

I like the way the bootstrap 4 framework works so I did a small experiment in the codeview and saw how it works.
This are the results:

class=“col-12 col-sm-10 col-md-6 col-lg-6 col-xl-6 text-justify mt-5 ml-sm-5 mb-sm-3 ml-md-2 mr-md-5 mb-lg-5 mx-xl-auto”

viewport	design	size	ml	mt	mr	mb
mob port	all	12	default	mt-5	default	default
mob land	sm	10	ml-5	"	default	mb-3
tablet	md	6	ml-2	"	mr-5	"
laptop	lg	6	"	"	"	mb-5
desktop	xl	6	mx-auto	"	mx-auto	"

This gives me sufficient tools to set the columns as I want. Thank you for help.

[psweb]

Wonderful news glad that all works out for your needs, and well done for such an extensive test.