paper-dialog
paper-dialog copied to clipboard
paper-dialog item spacing is inconsistent/confusing
paper-dialog is using shared styles, one of which is quite significant, it includes some space between elements: https://github.com/PolymerElements/paper-dialog-behavior/blob/618b72d/paper-dialog-shared-styles.html#L47
paper-dialog-scrollable doesn't have that. So if I put multiple rows of content in a scrollable area, I will have to duplicate that spacing inside that area, but in a tricky way because I don't want to have double space at the top or bottom of the scrolling area. This is a problem on its own, but there's more.
If I do this, I lose all the spacing:
<paper-dialog>
<form>
<div>stuff1</div>
<div>stuff2</div>
<div>...</div>
</form>
</paper-dialog>
Because now the dialog's CSS thinks it only has one row of content when it has more. It gets even worse if some rows of element are top-level in the dialog and some other rows are wrapped in a container.
To be honest I find it strange that the dialog wants to take part in the spacing of elements in the first place. Eg. paper-card doesn't have anything like that. I think this item spacing should be removed because it seems to cause more problems than it solves in non-trivial scenarios.
Hi @fejesjoco, I agree as well that probably paper-dialog
shouldn't style the rows. Unfortunately changing this would be a breaking change; also, further changing the ::content selectors would damage performance (if they get more specific they become even slower).
FYI there is another issue around this styling https://github.com/PolymerElements/paper-dialog-behavior/issues/21
@notwaldorf do you see non-breaking solutions for these problems? Would it be expensive to have a selector like :host(:not(.custom-content-style)) > ::content > *
?