Поплавок бумажного ниспадающего меню над другим содержанием

Вот моя проблема:Поплавок бумажного ниспадающего меню над другим содержанием

enter image description here

Я бумажный диалог с полем ввода и выпадающим списком. Вот код (нефрит):

paper-action-dialog#createMatch(ng-heading="'Create Match' | translate", transition="core-transition-bottom", style="width: 600px") 
    p 
    | {{"Choose your match options" | translate}} 
    p 
    paper-input#matchNameInput(floatinglabel="",ng-label="'Match Name' | translate", required="", ng-error="'You must enter a match name.' | translate",style="padding: 0") 
    p 
    paper-dropdown-menu#gameModeInput(ng-label="'Game mode' | translate") 
     paper-dropdown.dropdown 
     core-menu.menu 
      paper-item(ng-repeat="(id, name) in GameModeN" value="{{id}}") {{name}} 
    paper-button(affirmative="") {{"Cancel" | translate}} 
    paper-button.primary-btn(affirmative="", autofocus="") {{"Create" | translate}}

Вот преобразованный HTML, если он горит ваши глаза слишком много:

<paper-action-dialog id="createMatch" heading="Create Match" transition="core-transition-bottom" style="width: 600px"> 
    <p>Choose your match options</p> 
    <p> 
    <paper-input id="matchNameInput" floatinglabel="" label="Match Name" required=""></paper-input> 
    </p> 
    <p> 
    <paper-dropdown-menu id="gameModeInput" label="Game Mode"> 
     <paper-dropdown class="dropdown"> 
     <core-menu class="menu"> 
      <paper-item value="value">Item</paper-item> 
     </core-menu> 
     </paper-dropdown> 
    </paper-dropdown-menu> 
    </p> 
    <paper-button affirmative="">Cancel</paper-button> 
    <paper-button affirmative="" autofocus="" class="primary-btn">Create</paper-button> 
</paper-action-dialog>

Я попытался с помощью position:absolute и почти все комбинации типов позиций в меню и его родителей. Ничто не работает. Возможно, это потому, что это в тени? Как я могу заставить меню плавать над всем остальным?

источник

2014-12-05 Christian Stewart

ли вы попробовать добавить 'позицию: relative' родителю и' позиции: absolute' в меню? Вы увеличили z-индекс меню? –

@JosanIracheta Да, я пробовал обе эти вещи. –

@JosanIracheta Это довольно странно, так как он находится внутри тени dom –

Атрибут layered должен сделать это

<paper-dropdown class="dropdown" layered="true"> 
    <core-menu class="menu"> 
     <paper-item value="value">Item</paper-item> 
    </core-menu> 
    </paper-dropdown>

источник

2014-12-05 05:11:31

Wow awesome thanks so much !! –

Поплавок бумажного ниспадающего меню над другим содержанием

ответ

Смежные вопросы