Диалоговое окно Vuetify с переменной высотой и двумя отдельными столбцами прокрутки - PullRequest
Новая
       23

Диалоговое окно Vuetify с переменной высотой и двумя отдельными столбцами прокрутки

0 голосов
/ 14 июня 2019

У меня есть диалоговое окно (с переменной высотой) с верхним и нижним колонтитулами и двумя столбцами с переменной высотой содержимого.

Моя цель состоит в том, чтобы содержимое каждого из двух столбцов имело свою собственную отдельную полосу прокрутки (если нужно).

До сих пор у меня ушло довольно много времени, чтобы выяснить, как получить весь контент прокрутки диалога в первую очередь (без прокрутки верхнего и нижнего колонтитула):

https://codepen.io/arno-van-oordt/pen/vqNQKb (изменить размер экрана, чтобы изменить высоту диалога)

Но я понятия не имею, как мне это сделать для обоих столбцов по отдельности.Любые предложения по этому поводу приветствуются!

html: 

    <v-dialog v-model="dialog" width="640" persistent>
      <v-card height="90vh" class="card-flex">
        <v-layout column>
          <v-flex shrink>
            <v-toolbar dark color="primary">
              <v-toolbar-title>Some Dialog</v-toolbar-title>
            </v-toolbar>
          </v-flex>
          <v-flex class="content-flex">
            <v-layout row>
              <v-flex xs6>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis nunc aliquam, condimentum lectus porttitor, porta arcu. Nunc eget porta est. Nulla metus lacus, sollicitudin eget interdum at, cursus ac erat. Pellentesque mattis mi at felis cursus,
                sit amet imperdiet arcu cursus. Morbi porta ligula et ultrices fermentum. Aliquam augue felis, ultricies non finibus ac, imperdiet non nulla. Sed varius non enim et vehicula. Donec tempus, nibh eu eleifend suscipit, dui nibh auctor magna,
                <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis nunc aliquam, condimentum lectus porttitor, porta arcu. Nunc eget porta est. Nulla metus lacus, sollicitudin eget interdum at, cursus ac erat. Pellentesque
                mattis mi at felis cursus, sit amet imperdiet arcu cursus. Morbi porta ligula et ultrices fermentum. Aliquam augue felis, ultricies non finibus ac, imperdiet non nulla. Sed varius non enim et vehicula. Donec tempus, nibh eu eleifend suscipit,
                dui nibh auctor magna,
                <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis nunc aliquam, condimentum lectus porttitor, porta arcu. Nunc eget porta est. Nulla metus lacus, sollicitudin eget interdum at, cursus ac erat. Pellentesque
                mattis mi at felis cursus.
              </v-flex>
              <v-flex xs6>
                Some text that should have it's own scrollbar
              </v-flex>
            </v-layout>
          </v-flex>

          <v-flex shrink>
            <v-layout row>
              <v-flex class="text-xs-right">
                <v-btn color="primary">SOME BTN</v-btn>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-card>
    </v-dialog>

  </v-app>
</div>

css: 

.card-flex {
  display: flex;
  flex-direction: column;
}

.content-flex {
  overflow-y: auto;
  height: 0px;
}
...