заголовок сетки будет скрыт в p-диалоге во время сворачивания браузера

Question

Перейти к этой статье статья диалогового окна

См. Это изображение ниже, когда я открываю диалоговое окно

Но проблема в том, что заголовок сетки будет скрыт во время сворачивания браузера

Я использую диалоговое окно всев моем приложении.Мой проект будет жить в эти выходные.Но я должен решить это, прежде чем идти жить.Не могли бы вы кому-нибудь исправить это?

Answer 1

Изменение размера окна браузера не даст оптимальных результатов для адаптивного просмотра.Я проверил вашу страницу и CSS.Все выглядит хорошо и нет проблем.

Но, когда вы изменяете размер браузера, всплывающее окно появляется, как будто заголовок сетки скрыт под заголовком страницы.Причина этого заключается в том, что всплывающее окно сетки находится в фиксированном положении, поэтому оно рассчитает общую высоту окна браузера и отобразится в центре.

Попробуйте просмотреть это с помощью Переключить панель инструментов устройства (Ctrl + Shift + M)) и ваше всплывающее окно выглядит точно в центре по вертикали и горизонтали.Ниже изображение для вашей справки.

Answer 2

Используйте baseZIndex свойство для DynamicDialog и установите его значение больше #layout-topbar значение, которое 9998

const ref = this.dialogService.open(CarsListDemo, {
    header: 'Choose a Car',
    width: '70%',
    baseZIndex: 9999 //Base zIndex value to use in layering
});

Answer 3

Попробуйте это

body .ui-dialog {z-index: 9999;}

Answer 4

Вам необходимо переопределить .ui-dialog { z-index: 1001;} inline z-index, используя !important, как показано ниже:

.ui-dialog {
 z-index: 9999!important;
}

Это потому, что id #layout-topbar z-index больше, чем ui-dialog, поэтому вынеобходимо переопределить ui-dialog z-index, используя !important.надеюсь, это поможет вам.

Answer 5

Попробуйте это CSS

.ui-dynamicdialog { 
    height: 100%;
    overflow: auto;
    z-index: 100000;
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
    margin: 30px 0;
}

Настройте CSS в соответствии с вашими требованиями.Рассчитайте верх и установите его здесь