Angular Bootstrap не собирается полностью реагировать - PullRequest
Новая
       26

Angular Bootstrap не собирается полностью реагировать

0 голосов
/ 24 сентября 2018

У меня проблема с ngBootstrap в том смысле, что это не делает мое приложение полностью отзывчивым, и я не совсем уверен, что я делаю что-то не так, или если есть какая-то ошибкав библиотеке.

Хорошо, вот скриншот части моего приложения, которая работает неправильно:

  1. Полный экран, хорошо работает:

enter image description here

При уменьшении размера окна оно также продолжает хорошо работать, пока не достигнет этого размера:

enter image description here

Но если окно становится меньше этой точки, эти три карты просто перестают изменять размер.Вы можете видеть, что компонент ниже изменяет размеры лучше, хотя он также теряет свое правое поле:

enter image description here

Мой родительский шаблон выглядит так: 

    <div class="margin content-margin" *ngIf="config"  >
  <div class="row">
    <p class="title">{{ title?.toUpperCase() }}</p>
    <ng-template #tipContent>
      <div class="tooltip-inner ">{{description}}</div>
    </ng-template>
    <i class="fa fa-info-circle bootstrap-tooltip tooltip-text tooltip-relocate selected-color" placement="right" [ngbTooltip]="tipContent"  aria-hidden="true"></i>
  </div>
    <div class="row">
      <div class="breadc">
        <breadcrumb [locations]="getBreadcrumb()"></breadcrumb>
      </div>
      <div class="filters-reset" (click)="resetFilters()">
        <i class="fa fa-undo" aria-hidden="true"></i>
        Reset filters
      </div>
    </div>
    <div class="row row-separator">
      <card [title]="'DIMENSIONS'"  class="col col-sm-4" [enabled]="usesSegments ? 'true' : false" (cardOpen)="config?.cardStatus['segments'] = $event">
        <div class="margin">
          <segments [config]="config" [segmentsEnabled]="usesSegments" [cardOpen]="config?.cardStatus['segments']"></segments>
        </div>
    </card>
    <card [title]="'CHANNEL'"  class="col col-sm-4" (cardOpen)="config?.cardStatus['levelselect'] = $event">
      <levels-selector class="levels-wrapper" [config]="config" [cardOpen]="config?.cardStatus['levelselect']"></levels-selector>
    </card>
    <card [title]="'PERIOD'" class="col col-sm-4" (cardOpen)="config?.cardStatus['period_picker'] = $event">
      <period-picker-component class="period-picker"
        [cardOpen]="config?.cardStatus['period_picker']"
        [config]="config"
      >
      </period-picker-component>
    </card>
  </div>
    <div class="row row-separator" >
      <chart-card [title]="'CONVERSIONS GRAPH'" class="col" [config]="config" (cardOpen)="config?.cardStatus['chart'] = $event">
        <simple-chart-wrapper
            [chartOptions]="chartOptions"
            [config]="config"
            [cardOpen]="config?.cardStatus['chart']">
        </simple-chart-wrapper>
      </chart-card>
    </div>
    <div class="row row-separator">
        <table-card [title]="config?.data?.metric?.label + ' - '+ (config?.data?.filters?.period?.range)"
                    [downloadable]="true"
                    [tableController]="table"
                    class="col">
            <basic-table [config]="config" [table]="table"></basic-table>
        </table-card>
      </div>
</div>

Некоторые имена классов, которые вы видите применительно к некоторым из этих тегов, фактически не используются.В случае, если вы хотите увидеть применяемые классы CSS, здесь у вас есть дамп CSS, который применяется здесь: 

.container{
    background-color: #dee3ea !important;
    min-width: 1px;
    min-height: 1px;
    width:100%;
    height: 100%;
}

.title{
    margin-left: 15px;
}

.row-separator{
    margin-top: 2%;
}

.filters-reset{
    color: orange;
    position: absolute;
    right: 2%;
    cursor: pointer;
}

.tooltip-text{
    font-size: 20px !important;
}

.breadc{
    position: absolute;
    left: 0px !important;
}


.content-margin{
    position:relative;
    margin-top: 55px;
}

Я пробовал много вещей, таких как использование более специфических классов (таких каксм те), но ничего не работает.Эти карты просто не изменят размеры после этой точки.

Кто-то понимает, что я делаю здесь неправильно?

РЕДАКТИРОВАТЬ:

Версии зависимостей:

"bootstrap": "^ 4.0.0-alpha.6"

"@ ng-bootstrap / ng-bootstrap": "^ 1.1.2"

...