Положение и размер выпадающего меню в полимере

Question

Я изучаю Полимер. Мне очень нравится об этом. Однако, когда дело доходит до элементов стиля, я нахожу это немного сложным. В настоящее время я пытаюсь создать ниспадающий список, и я не могу сделать основной вещи. Я создал Plunk here. Код выглядит следующим образом:

<paper-dropdown-menu label="Team"> 
    <paper-listbox class="dropdown-content"> 
    <paper-item>Broncos</paper-item> 
    <paper-item>Panthers</paper-item> 
    <paper-item>Patriots</paper-item> 
    </paper-listbox> 
</paper-dropdown-menu> 

Я пытаюсь сделать стрелку раскрывающегося списка (v) появится рядом с текстом выбранного элемента, а не в дальнем правом углу выпадающего меню. Кроме того, я пытаюсь сделать listbox, который отображает ширину контейнера и правильно позиционируется. Однако мне не повезло. Я пробовал добавлять дополнения и поля в класс выпадающего контента без везения.

Answer 1

Вместо того, чтобы добавлять теги стиля к div, добавьте его в paper-dropdown-menu, он должен работать. для меня он не работает на IE

paper-dropdown-menu{ 
    background-color:silver; 
    padding-left:48px; 
    padding-right:48px; 
     width:124px; 
    } 

Я создал Plunk here

Answer 2

Глядя на демо на paper-dropdown-menu вы можете увидеть, что они центрировать текст с помощью выравнивания текста. Поэтому измените его на text-align: right; Он выравнивается со стрелкой.

Не уверен, что это то, что вы ищете.

paper-dropdown-menu { 
    --paper-input-container-underline: { 
    display: none; 
    } 
    --paper-input-container-label: { 
    text-align: right; 
    } 
    paper-item { 
    --paper-item-selected-weight: 400; 
    --paper-item-focused-before: { 
     background: #fff; 
    } 
    } 
} 

Plunk here