Угловой (7) Материал Панель инструментов + Сиденав; Возникли проблемы с разницей в высоте между рабочим столом и мобильным компьютером (включая образец стекаблица) - PullRequest
Новая
       8

Угловой (7) Материал Панель инструментов + Сиденав; Возникли проблемы с разницей в высоте между рабочим столом и мобильным компьютером (включая образец стекаблица)

0 голосов
/ 10 января 2019

Я настроил страницу для использования Angular Material mat-toolbar и mat-sidenav компоновок компонентов в приложении Angular 7. Это работает отлично, по большей части; Но у меня есть эта запутанная проблема с высотой mat-toolbar, когда она отличается от мобильных и настольных ПК.

Прилагается хранилище stackblitz, которое полностью иллюстрирует мою проблему.

СТОКБЛИЦКИЙ Хранилище

ПРОБЛЕМА

Панель инструментов должна иметь высоту 64px, а на рабочем столе она; Но на меньших экранах он падает до 56px, и я не понимаю, почему.

DESKTOP

enter image description here

MOBILE

enter image description here

Это важно из-за способа настройки контейнера для работы. Вся область в этом классе 

#content-container {
  position : absolute;
  top      : 64px;
  bottom   : 0;
  left     : 0;
  right    : 0;

  .sidenav {
    &.sitemap {
      background : $pickled-bluewood;
    }

<pre><code>&amp;.usernav {
  background : $ebony;
}
} }

Я знаю, что может решить эту проблему с помощью медиазапросов; Просто установить точку останова для меньших представлений, чтобы настроить top, но мне это кажется таким счастливым. Я хочу понять, что происходит, и посмотреть, есть ли более естественное решение, которое я пропускаю.

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

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

1 Ответ

0 голосов
/ 10 января 2019

В предопределенном css темы высота mat-toolbar-single-row определяется в медиазапросах для разных высот экрана.

Определение для экранов с максимальной шириной 599px 

@media (max-width: 599px){
    .mat-toolbar-row, .mat-toolbar-single-row {
        height: 56px;
    }
}

Определение для всех экранов шире, чем 599 пикселей: 

.mat-toolbar-row, .mat-toolbar-single-row {
    height: 64px;
}

С позицией absolute контейнера содержимого # он должен быть на 64px ниже <body> или верхней части браузера. В этом случае лучше использовать положение по умолчанию: статический

Элемент с положением: статический; не позиционируется каким-либо особым образом; он всегда располагается в соответствии с обычным потоком страницы

Наиболее тривиальным решением является удаление позиции и установка верхнего элемента # content-container на 0: 

#content-container {
    top: 0;
    bottom : 0;
    left : 0;
    right : 0;

    ...
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...