Используйте ngx-scrollbar для содержимого вкладки ngx-bootstrap

В своем проекте я использую bootstrap 4 и ngx-bootstrap. Теперь мне нужно создать компонент, который будет включать в себя 2 прокручиваемых div, переключаемых вкладками.

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

Итак, вот мой компонент, в котором я хочу разместить эти вкладки:

<div class = "d-flex flex-column h-100">
  <div class = "border-bottom align-items-center d-flex flex-shrink-0 pr-3 pl-3" style = "height: 60px !important;">
    <input type = "text" class = "form-control" id = "search" placeholder = "Search...">
  </div>
  <tabset [justified] = "true">
    <tab heading = "Title 1">
      <ng-scrollbar [autoHide] = "true">
        <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
    <tab class = "" heading = "Title 2">
      <ng-scrollbar [autoHide] = "true">
         <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
  </tabset>
</div>

В компоненте AppFooList я размещу список элементов. Например, это будет похоже на следующий код:

    hiiiiiiii <br>
    hiiiiiiii <br>
    hiiiiiiii <br>
    hiiiiiiii <br>
    ...

Можете ли вы помочь мне исправить мой код, чтобы он работал правильно? Ngx-scrollbar не работает с содержимым вкладок. Все мои попытки заканчивались прокруткой всего приложения, потому что контент имеет большую высоту, чем остальная часть приложения, иначе контент будет прокручиваться, но полоса прокрутки ngx не применялась, а полоса прокрутки была некрасивой. Мне нужно, чтобы высота div была остальным пространством внизу. Это причина, по которой я использую flexbox.

Обновлено: код в stackblitz

css angular twitter-bootstrap flexbox ngx-bootstrap

16.05.2018 18:39

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

4 760

Ответы 2

Вы можете применить высоту к ng-scrollbar:

ng-scrollbar {
  height: 80vh;
}

Вот редакция вашего stackblitz.

Извините, но для меня это бесполезно. Я использую flexbox, чтобы обеспечить "вид столбцов" сверху вниз на экране пользователя. И более длинный контент в виде пользовательского представления должен прокручиваться в div, а не во всем приложении.

— 19.05.2018 06:09

18.05.2018 23:02

Обновлено

Попробуй это

Проверить демо здесь

<div class = "d-flex flex-column h-100">
  <div class = "border-bottom align-items-center d-flex flex-shrink-0 pr-3 pl-3" style = "height: 60px !important;">
    <input type = "text" class = "form-control" id = "search" placeholder = "Search...">
  </div>
  <tabset [justified] = "true">
    <tab heading = "Title 1" [ngStyle] = "{'height':'calc(100vh - ' + offsetHeightVal + 'px)'}">
      <ng-scrollbar [autoHide] = "true">
        <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
    <tab class = "" heading = "Title 2" [ngStyle] = "{'height':'calc(100vh - ' + offsetHeightVal + 'px)'}">
      <ng-scrollbar [autoHide] = "true">
         <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
  </tabset>
</div>

app.component.ts

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  offsetHeightVal: number; //default value

  offset(el) {
    var rect = el.getBoundingClientRect(),
      scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
  }
  ngAfterViewInit() {
    this.offsetHeightVal = this.offset(document.querySelector('.tab-content')).top
  }
}

19.05.2018 21:53

Другие вопросы по теме

Стоит ли использовать Router в Effects

Как настроить несколько проверок для formGroup в приложении Angular 5

Angular 2+ HttpIntercept: дождитесь токена с сервера перед возвратом функции перехвата

Angular 5 firebase не работает

Получить строку из массива по ID

При щелчке флажка, как установить все предыдущие флажки как отмеченные в angular 4

Angular 6 TypeError: невозможно прочитать свойство 'call' неопределенного

Angular - "Слушайте" изменения @ViewChild

Небезопасно: data: image / *; base64,: 1 GET unsafe: data: image / *; base64, (Javascript / Angular)

Всплывающее окно Angular не работает в html-скрипте

Используйте ngx-scrollbar для содержимого вкладки ngx-bootstrap

Ответы 2

Другие вопросы по теме

Похожие вопросы