CODEWITHSUNDEEP
polymerfont-sizedropdown
SKMTH
SKMTH

Reputation: 622

paper-dropdown-menu font size

I'm trying to change the font size of what is selected in a paper-dropdown-menu, but everything I've tried is failing. I've tried:

--paper-input-container-label: {font-size: 8px;};
--paper-input-container-input: {font-size: 8px;};
--paper-input-container: {font-size: 8px;};
--paper-dropdown-menu: {font-size: 8px;};
--paper-dropdown-menu-input: {font-size: 8px;};
--paper-item: {font-size: 8px;};
--paper-item-selected: {font-size: 8px;};

Everytime, the rule was put in the :root selector but none of these work...

here's my code:

  <paper-dropdown-menu no-label-float class="rowsSelector">
    <paper-menu class="dropdown-content" selected="{{limit}}" attr-for-selected="value">
      <template is="dom-repeat" items="{{options}}">
        <paper-item value="{{item}}">{{item}}</paper-item>
      </template>
    </paper-menu>
  </paper-dropdown-menu>

Upvotes: 0

Views: 825

Answers (1)

JimJimL
JimJimL

Reputation: 129

You need to put it in a 'style is="custom-style"' tag and target the tag with a class or id unless you only have one dropdown menu or want them all to have the same font, font size etc..

Add below style code to adjust the font to be 20px. Notice the class to target the element I want to style, the class in my example is "test". If you do not want to use a class simply target all paper-dropdown-menu elements by changing .test with paper-dropdown-menu.

If you want to separate your custom style into its own file I believe that it has to be a HTML file for it to work.

<style is="custom-style">
    .test {

        --paper-input-container-label: {
          font-size: 20px;

        };
    }
</style>
<paper-dropdown-menu class="test" label="Dinosaurs">
    <paper-listbox class="dropdown-content">
        <paper-item>allosaurus</paper-item>
        <paper-item>brontosaurus</paper-item>
        <paper-item>carcharodontosaurus</paper-item>
        <paper-item>diplodocus</paper-item>
    </paper-listbox>
</paper-dropdown-menu>

Upvotes: 1

Related Questions