Проблема с прокруткой компонента диалогового окна Angular Material при запуске

Я использую компонент Angular Material Dialog в своем приложении, и в этом диалоговом окне я представляю пользователю HTML-таблицу данных, которая может иметь полосу прокрутки.

Моя проблема заключается в том, что когда я нажимаю кнопку, чтобы открыть фактический диалог, я заметил, что содержимое сразу же прокручивается вниз, что является неприятностью, поскольку мне нужно вручную прокручивать назад к началу.

Я использую стандартную настройку, как описано здесь:

https://material.angular.io/components/dialog/overview

Мой диалоговый вызов выглядит следующим образом:

myDialog(a: string, b: string) {
        let dialogRef = this.dialog.open(MyDialogComponent, {
            height: '500px',
            width: '800px',
            data: { a,b }
        });
}

Что я могу сделать, чтобы избежать этой проблемы с прокруткой вниз? Я пробовал использовать CSS, например top: 0; position: fixed;, но безрезультатно.


person tonyf    schedule 15.08.2018    source источник
comment
эта проблема, похоже, не связана с вашим диалогом, это с вашим компонентом, который вы используете. можешь показать HTML & CSS MyDialogComponent   -  person WasiF    schedule 15.08.2018
comment
@WasiF интересно. есть ли что-нибудь особенное, что я должен искать?   -  person tonyf    schedule 15.08.2018
comment
может быть эффект CSS вашего компонента или стилей. Пожалуйста, покажите свой код   -  person WasiF    schedule 15.08.2018
comment
может быть вы установили свойство scrollTop где-нибудь в вашем html или css. Предоставьте stackblitz   -  person WasiF    schedule 15.08.2018
comment
Нет scrollTop и полностью удалил мой компонент CSS. Все еще есть та же проблема.   -  person tonyf    schedule 15.08.2018
comment
тогда вам необходимо предоставить stackblitz   -  person WasiF    schedule 15.08.2018
comment
Только что обнаружил, что когда я удалил кнопку закрытия в тегах mat-dialog-actions, все работает нормально. Судя по тому, что я вижу, возможно, при загрузке, он фокусируется на кнопке «Закрыть». Как я могу изменить это или, возможно, переместить кнопку закрытия вверх?   -  person tonyf    schedule 15.08.2018
comment
Можете ли вы показать свой код, чтобы я мог решить эту проблему ... Я хочу знать, как вы помещаете эту кнопку закрытия. Вы только что поместили какой-либо символ, например X, или сделали что-то еще в теге действия   -  person WasiF    schedule 15.08.2018
comment
Пожалуйста, посмотрите мой ответ.   -  person tonyf    schedule 15.08.2018
comment
Привет, Тони. Я работаю редактором-добровольцем, и одна из вещей, которые мы делаем, - это редактируем вопросы, чтобы они были удобочитаемыми и полезными для будущих читателей. Ваши вопросы довольно болтливы, и мы бы очень помогли, если бы вы могли их немного сократить. Мы не поощряем благодарность / признательность и т. Д. В самих сообщениях - благодарность выражается в голосах и принятии, а иногда и в комментариях (303 ваших сообщения требуют исправления). Нет необходимости говорить, что помощь была бы отличной, так как нужно исправить еще 116 сообщений. Не стоит надеяться, что кто-то поможет, это еще 81 пост.   -  person halfer    schedule 15.08.2018
comment
Я также насчитал 36 отправленных вами txtspk (имеется ввиду пожалуйста) и 22 подписи. Вы не на вершине списка лидеров, но, вероятно, не за горами.   -  person halfer    schedule 15.08.2018
comment
Я иногда публикую этот совет, который дает хорошее представление о лаконичности, которую здесь широко предпочитают: Обратите внимание, что мы предпочитаем технический стиль написания здесь. Мы мягко не приветствуем приветствия, надеемся, что вы можете помочь, спасибо, заранее спасибо, благодарственные письма, приветы, добрые пожелания, подписи, пожалуйста, не могли бы вы помочь, болтливый материал и сокращенный txtspk, мольбу, как долго вы застрял, советы по голосованию, мета-комментарии и т. д. Просто объясните свою проблему и покажите, что вы пробовали, чего ожидали и что произошло на самом деле.   -  person halfer    schedule 15.08.2018


Ответы (2)


Причина, по которой вам это нравится, заключается в том, что компонент диалога автоматически фокусируется на первом вводе / кнопке в вашем HTML-содержимом. Вы должны добавить «autoFocus: false» к параметрам диалога, чтобы предотвратить это.

myDialog(a: string, b: string) {
    let dialogRef = this.dialog.open(MyDialogComponent, {
        height: '500px',
        width: '800px',
        autoFocus: false,
        data: { a,b }
    });
}
person Shay Zalman    schedule 09.02.2021
comment
Это устранило проблему для меня ???? - person pjpscriv; 26.06.2021

Решил мою проблему, переместив следующий HTML-код в верхнюю часть страницы.

<mat-dialog-actions>
    <br>
    <button mat-raised-button type="button" mat-dialog-close (click)="closeDialog()" class="my-btn">
        Close
    </button>
</mat-dialog-actions>
person tonyf    schedule 15.08.2018
comment
Со мной случилось то же самое. При открытии диалоговое окно автоматически прокручивается вниз. Я понял, что диалог прокручивается до первого найденного тега привязки. Это действительно странно. Я решил это, добавив фиктивный тег привязки в качестве первого дочернего элемента в диалоговом окне. ‹A href=› ‹/a› - person Gagan; 25.10.2019
comment
@Gagan: мне помог ваш комментарий. Большое спасибо - person Kona Suresh; 08.05.2020