Проблемы с CSS с Vuetify для отзывчивости с помощью Vue-Split-Panel и выбора границы

Question

У меня возникли проблемы с CSS в Vuetify, и я надеюсь, что кто-нибудь может помочь мне решить их. Я использую представление разделенной панели (vue-split-panel) с Vuetify, но Vuetify, похоже, не всегда распознает, когда запускать ширину полной колонки, как показано ниже. Я могу "вызвать" полную ширину столбца (для той же ширины разделенной панели), просто открыв, а затем закрыв консоль Chrome js. Я положил это в кодовую коробку, чтобы она воспроизводилась. При этом я вижу новую проблему, которую переключатели не показывают.

https://codesandbox.io/s/split-view-test-7mlx1

Если вы сможете показать мне, как настроить песочницу, чтобы заставить реагировать работать, я был бы очень признателен!

Предполагается, что радио-кнопка:

Кроме того, проблема, которую я могу 'Воспроизведение в codeandbox, но я испытываю это в моем приложении (это расширение JupyterLab), показано на нижнем снимке экрана: метка выбора проходит через границу. Я пытался выяснить, есть ли где-нибудь конфликт CSS, но не знал точно, где искать.

Кроме того, у меня также есть проблема, что меню выбора смещено пропорционально левому меню по какой-то причине ... почему открытие левого и верхнего меню влияет на положение? Как я могу это исправить? Я попытался использовать свойство «attach» и добавить id к самому элементу или создать родительский div, но ни один из них, похоже, не решил его. Это немного воспроизводимо в песочнице, если сделать разделенную панель широкой и щелкнуть мультиселектор, затем сделать его уже и щелкнуть снова. Вы увидите, что меню смещено, когда оно открывается.

Решения, не включающие iFrames, предпочтительнее, и да, мое приложение обернуто <v-app>, однакоТак как это расширение JupyterLab, у меня есть доступ только к главному пространству вкладок (не к левому или верхнему меню), поэтому v-приложение оборачивается вокруг элемента HTML, который является областью основной вкладки, а не на весь экран.

Я думаю, что может быть ошибка в коде Vuetify где-то рядом с этой функцией: https://github.com/vuetifyjs/vuetify/blob/054555a42e2ef368df2d6e168d1eec7fc06fb12c/packages/vuetify/src/components/VSelect/VSelect.ts#L456

Answer 1

Я решил все проблемы с CSS

Рефакторинг макета сетки, добавив соответствующие компоненты и разбивки в пользовательском интерфейсе. Добавлено исправление для радио кнопок. Добавлены зависимости css, зависимости значков материалов, шрифты, которые vuetify использует внутренне

Проверьте рабочий код здесь: https://codesandbox.io/s/split-view-test-47f2h

<template>
  <div id="app">
    <v-app>
      <Split style="height: 500px;">
        <SplitArea :size="25">panel left</SplitArea>
        <SplitArea :size="75">
          <v-container fluid grid-list-md>
             <v-layout row wrap>
              <v-flex class="d-flex" xs="12" sm="12" md="6" lg="4">
                <v-text-field
                  v-model="params.c.selected"
                  label="C"
                  hint="Penalty parameter C of the error term."
                  persistent-hint
                  return-object
                  type="number"
                  outlined
                ></v-text-field>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-select
                  v-model="params.kernel.selected"
                  hint="Specifies the kernel type to be used in the algorithm. It must be one of ‘linear’, ‘poly’, ‘rbf’, ‘sigmoid’, ‘precomputed’ or a callable. If none is given, ‘rbf’ will be used. If a callable is given it is used to pre-compute the kernel matrix from data matrices; that matrix should be an array of shape (n_samples, n_samples)."
                  :items="params.kernel.items"
                  label="Kernel"
                  persistent-hint
                  return-object
                  outlined
                ></v-select>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-text-field
                  v-model="params.degree.selected"
                  label="Degree"
                  hint="Degree of the polynomial kernel function ('poly'). Ignored by all other kernels."
                  persistent-hint
                  return-object
                  type="number"
                  outlined
                ></v-text-field>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-text-field
                  v-model="params.coef0.selected"
                  label="Coef0"
                  hint="Independent term in kernel function. It is only significant in 'poly' and 'sigmoid'."
                  persistent-hint
                  type="number"
                  outlined
                ></v-text-field>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-radio-group
                  v-model="params.probability.selected"
                  hint="Independent term in kernel function. It is only significant in 'poly' and 'sigmoid'."
                  persistent-hint
                >
                  <template v-slot:label>
                    <div style="font-size: 12px">
                      Probability:
                      boolean, optional (default=False)
                    </div>
                    <br>
                  </template>
                  <v-radio label="True" :value="true" color="black"></v-radio>
                  <v-radio label="False" :value="false" color="black"></v-radio>
                </v-radio-group>
              </v-flex>
            </v-layout>
          </v-container>
        </SplitArea>
      </Split>
    </v-app>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      params: {
        c: { default: 1, selected: 1 },
        kernel: {
          default: "rbf",
          selected: "rbf",
          items: ["linear", "poly", "rbf", "sigmoid", "precomputed"]
        },
        degree: { default: 3, selected: 3 },
        coef0: { defaul: 0.0, selected: 0.0 },
        probability: { default: true, selected: true }
      }
    };
  }
};
</script>

<style>
</style>