Контент Flex Layout не отображается точно - PullRequest
Новая
       6

Контент Flex Layout не отображается точно

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

Я пытаюсь показать 100% контента, когда размер экрана очень мал (xs).но это не работает. 

<ng-template #chatlistwithwindow>
  <div class="main-content">
    <div fxLayout="row" fxLayoutAlign="start start">
      <app-chat-user-list fxFlex.xs="100%" fxFlex.gt-xs="23%" fxFlexFill></app-chat-user-list>
      <app-chat-window fxFlex.xs="100%" fxFlex.gt-xs="77%" fxFlexFill *ngIf="toShow" (closeChatWindow)="setToShow(toShow)"></app-chat-window>
    </div>
  </div>
</ng-template>

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

Изображение, показывающее проблему с выравниванием содержимого:

enter image description here

1 Ответ

0 голосов
/ 13 февраля 2019

Отказ от ответственности: Я не совсем уверен, правильно ли я понял ваш вопрос.Пожалуйста, добавьте больше деталей, если я вас неправильно понял.

Мое понимание вашей проблемы: вы хотите

  • показать ширину одного элемента шириной 100%, скрывая другой элементкогда размер экрана равен XS
  • , покажите один элемент шириной 23% ширины, а другой - оставшуюся ширину, когда экран больше XS

. Этого можно добиться, используя следующий фрагмент: 

<div class="content" fxLayout="row">
  <div fxFlex fxFlex.gt-xs="23%" class="side">XS: 23%, 100% else</div>
  <div fxFlex fxHide.xs="true" class="main">MAIN</div>
</div>

Найдите живой пример здесь: https://stackblitz.com/edit/angular-7dhkyx

...