<wa-dialog> popup location; top, centered, bottom

[HovKlan-DH]

Would it be possible to have an option to specify the popup location of <wa-dialog>, so it would be possible to have it opened a litle closer to the top?

Currently it is centered in the middle, but personally I find it more pleasing an natural if it would be anchored a little more to the top - alike Bootstrap.

Now we have this:

But maybe I would want to located neared the top:

[claviska]

You can target the dialog's internal dialog part to handle this.

wa-dialog::part(dialog) {
  margin-block-start: 10vh; 
}

Example: https://codepen.io/claviska/pen/pvozBbP?editors=0100

[HovKlan-DH]

Two things about this 😁

Sorry, but this seems not to work - not even on the Codepen? In my browser at least, this is still vertically centered.

And, yes I know that I will always be able to overwrite CSS, and tweak it to my liking, but isn't the whole idea with a library/framework, that it should be easy to use for the most people? The above ::part(dialog) and margin-block-start is not that natural for me, and by then it would take me much longer time to figure this out, rather than having a "align-to-top" setting or alike. I get it, that you cannot satisfy everyone, but if a widely used library like Bootstrap has that visibility, then I think it couldn't hurt to have something similar? 😁

[claviska]

Sorry, the CodePen I used was for the local version where we renamed the "base" part to "dialog" so it worked for me locally. Until the next release, the correct CSS is:

wa-dialog::part(base) {
  margin-block-start: 10vh;
}

But it will soon be more consistent with other elements:

wa-dialog::part(dialog) {
  margin-block-start: 10vh;
}

And, yes I know that I will always be able to overwrite CSS, and tweak it to my liking, but isn't the whole idea with a library/framework, that it should be easy to use for the most people?

I tend to agree. I think it's reasonable to expect certain placements, but opinions as to how the dialog should behave relative to a specific side will vary. For this, changing one CSS property (that can apply to all of your dialogs if you want it do) seems like a reasonable tradeoff.

[claviska]

I updated the example: https://codepen.io/claviska/pen/pvozBbP?editors=0100

[HovKlan-DH]

As I now know how to do this, it is of course all fine with me, but I urge you then to incorporate an concrete example in the documentation for this, so it is easier for people to relate to.

Thanks a lot for your help understanding this, and knowing your reasons behind it.