paper-dialog icon indicating copy to clipboard operation
paper-dialog copied to clipboard

paper-dialog item spacing is inconsistent/confusing

Open fejesjoco opened this issue 8 years ago • 1 comments

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.

fejesjoco avatar Aug 05 '16 10:08 fejesjoco

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 > * ?

valdrinkoshi avatar Aug 12 '16 22:08 valdrinkoshi