CODEWITHSUNDEEP
csspolymer
ivva
ivva

Reputation: 2949

How to overwrite polymer component style css

I want to change css of Polymer component paper-dropdown-menu. I want to change the width of inner element - iron-dropdown (or paper-listbox) that is in the shadow dom of dropdown.

Should I make new custom element and how to change css of this element? I tried this:

<dom-module id="my-button">
     <style is="custom-style">
        paper-dropdown-menu {
            --paper-dropdown-menu-ripple: {
                width: 500px;
            }
        }
    </style>
    <template>
        <content></content>
    </template>
    <script>
        Polymer({
            is: 'my-button'
        })
    </script>
</dom-module>
<my-button>
    <paper-dropdown-menu label="Your favourite pastry">

        <paper-listbox class="dropdown-content">
            <paper-item>Croissant</paper-item>
            <paper-item>Donut</paper-item>
            <paper-item>Financier</paper-item>
            <paper-item>Madeleine</paper-item>
        </paper-listbox>
    </paper-dropdown-menu>
</my-button>

Upvotes: 0

Views: 1273

Answers (2)

tony19
tony19

Reputation: 138276

To set the width of the paper-listbox, change your selector to paper-listbox:

paper-listbox {
  width: 500px;
}

To set the widths of paper-listbox and paper-dropdown-menu to be the same:

paper-dropdown-menu,
paper-listbox {
  width: 500px;
}


<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-listbox/paper-listbox.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-dropdown-menu,
        paper-listbox {
          width: 500px;
        }
      </style>
      <paper-dropdown-menu label="Your favourite pastry">
        <paper-listbox class="dropdown-content">
            <paper-item>Croissant</paper-item>
            <paper-item>Donut</paper-item>
            <paper-item>Financier</paper-item>
            <paper-item>Madeleine</paper-item>
        </paper-listbox>
    </paper-dropdown-menu>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({ is: 'x-foo' });
      });
    </script>
  </dom-module>
</body>

codepen

Upvotes: 1

Taufiq Ahmed
Taufiq Ahmed

Reputation: 747

Are you trying to use a button to trigger a dropdown menu like this? Then you can use 'paper-menu-button' element. If you want to use just the paper-dropdown-menu then

You can use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.

To change width:

paper-dropdown-menu{
  -paper-input-container: {
     width: 100px;
  }
}

Upvotes: 1

Related Questions