CODEWITHSUNDEEP
polymer
jeff
jeff

Reputation: 3327

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

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.

enter image description here

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

Upvotes: 3

Views: 1129

Answers (2)

Fausto R.
Fausto R.

Reputation: 1334

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

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

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657248

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

Upvotes: 3

Related Questions