Polymer, how to adjust padding to internal div on paper-dialog-scrollable

Question

The content area of paper-dialog-scrollable has a 24px padding on the left and right. I'd like to change that. When the HTML is rendered, it's an in-line style sheet and an in-line div that has the padding. I've tried using the following to no avail. The polymer inline styles come in after my inline style.

DOES NOT WORK:

<style>
  .scrollable {
    --paper-dialog-scrollable: {
        padding-left: 0px;
        padding-right: 0px;
    };
  }
</style>

In the following image it is the div with id="scrollable" that I need to change. I think it is scope=paper-dialog-scrollable-0 that actually sets the padding.

So how do I adjust padding to internal div on paper-dialog-scrollable?

score 3 · Accepted Answer · edited May 23 '17 at 10:30

You could use selectors like ::shadow and /deep/ but they are deprecated. If an element doesn't provide the hooks (CSS variables and mixins) then you're basically out of luck and there is non such hook for .scrollable.

What you can do, is to create a feature request in the elements GitHub repo to support additional selectors by mixins.

Another workaround I already used successfully is to add a style module.

Create a style module like

<dom-module id="scrollable-customization">
 <style>
  .scrollable {
    --paper-dialog-scrollable: {
      padding-left: 0px;
      padding-right: 0px;
    };
  </style>
</dom-module>

import it and then "inject" it to the scrollable element

var myDomModule = document.createElement('style', 'custom-style');
myDomModule.setAttribute('include', 'scrollable-customization');
Polymer.dom(this.$pdscroll.root).appendChild(myDomModule);

I hope the syntax is correct. I use Polymer only with Dart. The dom-module needs to be a custom-style even though this is normally only necessary when used outside a Polymer element.

See also Styling Polymer paper-slider

Is there a way to achieve this without injecting that style, I mean by just using the mixin --paper-dialog-scrollable ? — Fausto R., Mar 29 '17 at 20:57
I guess not, but not sure. I haven't worked with Polymer for more than a year. — Günter Zöchbauer, Mar 30 '17 at 06:20

score 1 · Answer 2 · answered Mar 29 '17 at 21:09

1

I found another way, just by using the element style, as follow

paper-dialog-scrollable { --paper-dialog-scrollable:  { padding: 0 10px; }; }

answered Mar 29 '17 at 21:09

Fausto R.

1,314
3
16
29

Polymer, how to adjust padding to internal div on paper-dialog-scrollable

2 Answers2