11

I have the following piece of code:

      <paper-dropdown-menu id="mydropdown" label="City?">
        <paper-listbox class="dropdown-content">
          <paper-item>Inbox</paper-item>
          <paper-item>Starred</paper-item>
          <paper-item>Sent mail</paper-item>
          <paper-item>Drafts</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>

But as seen in the image below, the dropdown-content will have very small width. How can I in a clean way set the width to the same size as the actual paper-dropdown-menu?

enter image description here

Whyser
  • 2,187
  • 2
  • 20
  • 40

4 Answers4

5

I believe I have created what you are looking for in this jsfiddle.

or if you prefer here is the code snippet

.custom {
  width: 190px;
}
.custom2 {
  width: 400px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <base href="//polygit.org/components/">

  <link rel="import" href="polymer/polymer.html">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">

</head>

<body unresolved>
  <dom-module id='base-page'>
    <template>
      <paper-dropdown-menu id="mydropdown" class="custom" label="City?">
        <paper-listbox class="dropdown-content custom" horizontalAlign='left'>
          <paper-item>Inbox</paper-item>
          <paper-item>Starred</paper-item>
          <paper-item>Sent mail</paper-item>
          <paper-item>Drafts</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
      <br>
      <paper-dropdown-menu id="mydropdown" class="custom2" label="City?">
        <paper-listbox class="dropdown-content custom2" horizontalAlign='left'>
          <paper-item>Inbox</paper-item>
          <paper-item>Starred</paper-item>
          <paper-item>Sent mail</paper-item>
          <paper-item>Drafts</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
    </template>
  </dom-module>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'base-page',
        properties: {}
      });
    });
  </script>
  <base-page></base-page>
</body>

</html>

All I did was created a custom class that was applied both to the dropdown-menu and the listbox that gave them each the same width. I believe 190px is the default, but once you have the class you can size it how you want it.

Jarod Moser
  • 7,022
  • 2
  • 24
  • 52
  • Looks like this only works if the width is fixed in pixels, but does not work for say 80%. This is because individual items have their position set to relative and therefore are not affected by the parent element... maybe. – Sergiy Belozorov Oct 10 '16 at 14:43
  • @SergiyByelozyorov Yes that is right, Is there a reason you need to use 80 %? If so you could go with what has suggested. However I would suggest against it for code maintainability. If you change iron-dropdown it will change the way all of the dropdowns throughout your app will behave – Jarod Moser Oct 10 '16 at 15:22
  • I need percentage because width of the dropdown scales with window size. All I need it to have the size of the list to match the size of the dropdown. – Sergiy Belozorov Oct 11 '16 at 19:22
3

In this u can adjust the width according to you iron-dropdown give the left 0 and width:100% 

    .custom {
      width: 100%;
    }

    .custom2 {
      width: 100%;
    }
    iron-dropdown{
      left:0 !important;
      width:100% !important;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
      <base href="//polygit.org/components/">

      <link rel="import" href="polymer/polymer.html">
      <script src="webcomponentsjs/webcomponents-lite.js"></script>

      <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
      <link rel="import" href="paper-item/paper-item.html">
      <link rel="import" href="paper-listbox/paper-listbox.html">

    </head>

    <body unresolved>
      <dom-module id='base-page'>
        <template>
          <paper-dropdown-menu id="mydropdown" class="custom" label="City?">
            <paper-listbox class="dropdown-content custom" horizontalAlign='left'>
              <paper-item>Inbox</paper-item>
              <paper-item>Starred</paper-item>
              <paper-item>Sent mail</paper-item>
              <paper-item>Drafts</paper-item>
            </paper-listbox>
          </paper-dropdown-menu>
          <br>
          <paper-dropdown-menu id="mydropdown" class="custom2" label="City?">
            <paper-listbox class="dropdown-content custom2" horizontalAlign='left'>
              <paper-item>Inbox</paper-item>
              <paper-item>Starred</paper-item>
              <paper-item>Sent mail</paper-item>
              <paper-item>Drafts</paper-item>
            </paper-listbox>
          </paper-dropdown-menu>
        </template>
      </dom-module>
      <script>
        HTMLImports.whenReady(function() {
          Polymer({
            is: 'base-page',
            properties: {}
          });
        });
      </script>
      <base-page></base-page>
    </body>

    </html>
aditya shrivastava
  • 724
  • 1
  • 8
  • 24
  • This actually works, but for some reason it stops working as soon as I copy the snippet into my app. Looks like there is some CSS conflict... – Sergiy Belozorov Oct 10 '16 at 15:11
  • Can you please explain why do you change CSS properties of iron-dropdown even though it's not directly present in the DOM? – Sergiy Belozorov Oct 10 '16 at 15:15
  • If your css is conflict then just use `iron-dropdown{left:0 !important; width:100% !important; }` it will work and now another question because this `iron-dropdown` css was not allowing us to adjust the width of that dropdown so i Inspect it and change the width as u asked – aditya shrivastava Oct 11 '16 at 07:10
  • hey budy if this answer is useful then accept it and close this question thanks – aditya shrivastava Oct 13 '16 at 06:58
  • I think the author of the question does not care about it anymore. I started the bounty, but I can't accept the answer since I am not the author. – Sergiy Belozorov Oct 14 '16 at 17:11
  • Hello, I do care and read your solutions. But wasn't quite satisfied with the solutions since they didnt feel quite right. I do believe that Kjell's answer is more on track, but haven't been able to verify that it works yet. – Whyser Oct 19 '16 at 18:39
  • If u think my answer is not right than answer my question that how is this example possible which is running on this site? Kk thanks – aditya shrivastava Oct 19 '16 at 18:59
  • Just because an answer works, doesn't mean it answers the question. As Kjell noted in his post, I wanted a clean way (AKA "pure" polymer way) of doing things, and thus I didn't accept neither of your answers because they didn't feel quite right. If I wanted _any_ possible solution to this problem I probably wouldn't have written on SO in the first place. But I appreciate your effort! :) – Whyser Oct 20 '16 at 09:24
2

Actually i believe the two answers by @aditya shrivastava and @jarod moser are not working if you want it the "pure" polymer style.

Here my reasoning:

  • you use CSS that's not getting shimmed by Polymer
  • Styles are bleeding through the DOM Tree, which is not intended by Polymer

So my solution here:

  • set the width of input as proposed in the other two answers
  • set the with of dropdown with the help of the CSS Mixin:
.custom2 {
  --paper-dropdown-menu-button: {
     left: 0;
     width: 100%;
  };
}

The Mixin gets applied to the dropdown box - an iron-dropdown actually - when the CSS is getting rewritten. See the documentation at: https://www.polymer-project.org/1.0/docs/devguide/styling#custom-css-mixins

Then your code should follow this basic setup:

<dom-module id="some-kind-of-element">
  <style>
    #mydropdown {
      --paper-dropdown-menu-button: {
        left: 0;
        width: 100%;
      };
    }
  </style>

  <template>
    <paper-dropdown-menu id="mydropdown" label="City?">
        <paper-listbox class="dropdown-content">
          <paper-item>Inbox</paper-item>
          <paper-item>Starred</paper-item>
          <paper-item>Sent mail</paper-item>
          <paper-item>Drafts</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
  </template>
</dom-module>

I'm not 100% percent sure about the selector now, but you can see in the web inspector how the styles are added to the elements inside the paper-dropdown-menu element. See the element documentation at polymer: https://elements.polymer-project.org/elements/paper-dropdown-menu to find guidance which CSS Mixins are avaliable to you and play around with them, until you nail it. Maybe you also have to overrule the default settings with the use of !important CSS attribute modifier.

Custom CSS is still quite annoying in Polymer...

Kjell
  • 832
  • 7
  • 11
  • I haven't tried this yet. But just to be clear, would you mind posting the HTML also to show which element uses the custom2-class etc? Thanks! – Whyser Oct 20 '16 at 09:27
  • I have updated my answer - hope this guides you the "polymerry" way! ;)) – Kjell Oct 24 '16 at 12:57
  • 1
    This didn't _quite_ work for me, using Polymer v3. `--paper-menu-button-dropdown` was the mixin that worked, and rather than `left: 0; width: 100%`, I had to set width to an absolute value (`width: 289px` in my case, without setting a value for `left`), as otherwise the dropdown would be on the left side of the page. Fortunately, my case was one where the paper-dropdown-menu is being set to a specific value anyway. – Brian S Feb 12 '19 at 02:03
  • Also: I have successfully re-positioned the iron-dropdown with `--paper-menu-button-content`, setting `margin: a b c d !important`. The important is required, as otherwise styling within paper-menu-button will force `margin-top: -10px` and `margin-bottom: 20px`. – Brian S Feb 12 '19 at 02:17
  • sorry Brian, my answer is quite dated already and refers to Polymer 1.x... – Kjell Feb 13 '19 at 08:10
0

to make 'dropdown-content' dependent to width of the paper-dropdown-menu do this:

  1. create your own menu: 
    < resizable-dropdown-menu >
    copy all component from 
    < paper-dropdown-menu-light >
    (i like it more), or 
    < paper-dropdown-menu >

  2. import IronResizableBehavior enter 

    <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">

  3. add Polymer.IronResizableBehavior 

    behaviors: [
            //...
            Polymer.IronValidatableBehavior,
            Polymer.IronResizableBehavior    // add this
          ],

  4. Add this to attached function:

/*
 *
 * to make menu the same width as container;
 *
 */

var ironDropdown = Polymer.dom(this.$.menuButton.root).querySelector('iron-dropdown');
this.addEventListener('iron-resize', (e) => {
  ironDropdown.style.width = Polymer.dom(this.root).node.host.offsetWidth+'px';
});
Ivan Solskiy
  • 1
  • 1