WedX - журнал о программировании и компьютерных науках

Прокручиваемые элементы контента с вкладками динамической высоты Angular Material

Этот вопрос возник несколькоl times во время эволюции Материал Angular, но я не могу сделать так, чтобы ни одно из предложений не работало для версии 1.0.5. Вся страница (или гибкий контейнер) прокручивается, перемещая вкладки из поля зрения.

Как я могу получить прокручиваемые полноразмерные элементы контента?

<div flex>
    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="one">
            <md-content class="md-padding">

Демонстрационная скрипка

Бонусная карма за включение пользовательских полос прокрутки.

scroll tabs angularjs angular-material
20.02.2016

Ответы:


1

Я разобрался. Удалив директиву dynamic-height, а затем используя абсолютное позиционирование, она работает:

.tabs-wrapper {
    position: relative;
}
.full-size {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div ng-app="sandbox">
    <div flex class="tabs-wrapper">
        <md-tabs class="full-size" md-border-bottom>

демонстрация скрипта

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

Примечание. В демонстрации скрипки указана неправильная высота. Эта проблема не возникает в моем проекте.

22.02.2016

2

Оберните содержимое вкладки внутри div и назначьте ему максимальную высоту.

<md-tab label="two">
        <md-content class="md-padding">
            <div class="tab-content">
                <h1 class="md-display-2">Tab Two</h1>
            <div>
        <md-content>
<md-tab>

и css часть

div.tab-content{
  max-height:350px;
}

ссылка на Js-скрипт

29.02.2016
  • Для этого потребуется фиксированная высота, которая мне бесполезна. 29.02.2016

    • 3

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

    md-tabs-wrapper {
    position : fixed;
    width: 100%;
    z-index: 1;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}

md-tabs-content-wrapper {
    margin-top: 48px;
}
    01.04.2017
    Новые материалы
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    Для любых предложений по сайту: [email protected]