Я использую Angular Material2 в приложении Angular 2.4.0 (используя @angular/material: 2.0.0-beta.1). По какой-то причине выпадающее меню md-select вместо того, чтобы появляться над начальным значением или заполнителем или стрелкой для выбора раскрывающегося списка, как показано в этих examples из документов материалов, отображается полностью в нижней части страницы. В том случае, если раскрывающийся список md-select находится в правом верхнем углу страницы (компонент, который я пытаюсь установить в верхнем правом углу страницы), когда вы нажимаете стрелку, чтобы просмотреть раскрывающиеся варианты, она будет прокручиваться вы в нижней части страницы, где они будут отображаться. Они также будут полной шириной страницы, а не шириной раскрывающегося списка.Выпадающий список углового материала2 md-select появляется внизу страницы
Вот мой компонент (по крайней мере, соответствующие биты - это приложение довольно большое + я прокомментировал или удалил столько кода, не относящегося к выпадающему списку (и удалил все в представлении, отличном от раскрывающегося списка, вопрос для себя, а также сделать его более легким для тех, кто читает это, чтобы этот вопрос)):
import { Component, EventEmitter, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
moduleId: module.id,
selector: 'my-component',
templateUrl: 'my-component.component.html',
styleUrls: ['my-component.component.css'],
providers: [FormBuilder]
})
export class MyComponent implements OnInit {
@Input() page: Page;
canvasBackgroundColors: string[] = ['White', 'Pink', 'Black'];
draftModule: FormGroup;
// --- Component Constructor ---
constructor(private formBuilder: FormBuilder){}
// --- Angular LifeCycle Hooks ---
ngOnInit() {
this.formBuilderInit();
}
// --- UI Delegates ---
public onSave() {
debugger;
}
// --- Private Helpers ---
private formBuilderInit() {
this.draftModule = this.formBuilder.group({
canvasBackgroundColor: this.page.canvasBackgroundColor,
});
this.draftModule.valueChanges.subscribe(draftMod => {
console.log('Test Module', draftMod);
})
}
}
NgModule Ассоциированные имеет MaterialModule импортируемые соответствующий образ. Вот весь вид (Haml):
%form{'[formGroup]' => 'draftModule', '(ngSubmit)' => 'onSave()'}
%md-select{'formControlName' => 'canvasBackgroundColor'}
%md-option{'*ngFor' => 'let color of canvasBackgroundColors', :value => '{{color}}'}
{{color}}
%button{:type => 'submit'}
Save
В настоящее время все CSS для всего приложения закомментированые, так что я знаю, что это не что-то там влияет на выпадающем меню. Выпадающее меню отлично работает и корректно обновляется с помощью построителя форм, а именно, когда вы нажимаете раскрывающуюся ошибку, параметры внезапно отображаются полностью в нижней части страницы и имеют ширину страницы. Как только вы выберете вариант, вы получите прокрутку назад до того места, где находится раскрывающийся список. Я искал везде и не могу найти никого другого, у кого есть эта проблема, или исправить это. Ближе всего я пришел к одному человеку, который упоминал в этом github issue, что у них была эта проблема, но они исправили это, добавив их. Я попробовал это, и добавление тематики не повлияло на то, как работает выпадающее меню.
Для получения дополнительных разъяснений, когда я проверяю варианты раскрывающегося списка, которые появляются внизу страницы, я заметил, что они появляются не только вне шаблона компонента, но и вне углового приложения. Html, показанный в инспекторе, выглядит примерно как следующий код (упрощен, конечно, для удаления всех компонентов, которые не имеют отношения к этой проблеме). Примечание: my-app является селектор для компонента приложения и cdk-overlay-container включает md-select-panel и md-select-content и варианты выпадающие):
<html>
<head></head>
<body id="body" class>
<my-app>
<my-component>
<md-select></md-select>
</my-component>
</my-app>
<div class="cdk-overlay-container"></div>
</body>
</html>
Любые советы будут оценены!
как вы управляете своим шаблоном css? Если у вас слишком много опций, они будут переполнять границы, используя размеры вашего устройства. –
Hi @RomanC Я не совсем уверен, что я понимаю ваш вопрос, поскольку я прокомментировал большинство своих шаблонов CSS, чтобы попытаться сузить проблему, поэтому в большинстве моих шаблонов CSS сейчас нет ничего, и проблема с раскрывающимися вариантами раскрывающегося списка md-select, отображающимися внизу страницы, все еще присутствует. Было слишком много для включения в комментарий, но я обновил свой вопрос выше со всеми CSS, которые остаются в случае, если это помогает. В настоящее время я тестирую устройство на 15-дюймовом экране. – NColey
@RomanC Я только что просмотрел и прокомментировал все CSS для приложения, а также удалил как можно больше компонентов, не нарушив приложение, и проблема все еще сохраняется. Я также обновил свой исходный вопрос, так как заметил, что html для параметров md-select не просто появляется вне div для компонента md-select, который был размещен, но вне всего углового приложения, которое кажется ошибкой , Если кто-нибудь знает, что это будет здорово. – NColey