CSS 使用 Vue-Split-Panel 和 select 边框的 Vuetify 响应问题
CSS issues with Vuetify for responsivity using Vue-Split-Panel and select border
我在使用 Vuetify 时遇到了各种 CSS 问题,我希望有人可以帮助我解决这些问题。我在 Vuetify 中使用了拆分面板视图 (vue-split-panel),但 Vuetify 似乎无法始终如一地识别何时触发全列宽度,如下所示。我可以通过打开然后关闭 Chrome js 控制台来 "trigger" 完整的列宽(对于相同的拆分面板宽度)。
我将它放入一个代码箱中,以便它可以重现。这样做时,我发现了一个新问题,即单选按钮未显示。
https://codesandbox.io/s/split-view-test-7mlx1
如果您能告诉我如何调整沙箱以使响应正常工作,我将不胜感激!
应该是一个单选按钮:
此外,我无法在 codesandbox 中重现但我在我的应用程序(它是 JupyterLab 扩展)中遇到的问题显示在底部屏幕截图中:select 标签有边框线经历它。我试图找出某个地方是否存在 CSS 冲突,但不知道具体去哪里找。
此外,我还有一个问题,即 select 菜单与左侧菜单成比例偏移,出于某种原因...为什么打开左侧和顶部菜单会影响位置?我该如何解决?我试过使用 "attach" 属性 并向元素本身添加一个 id,或者创建一个父元素 div,但似乎都无法解决问题。
通过使拆分面板变宽并单击 multi-select,然后使其变窄并再次单击,这在沙箱中可以稍微重现。您会看到菜单在打开时发生了偏移。
不涉及 iFrame 的解决方案将是首选,是的,我确实用 <v-app>
包装了我的应用程序,但是由于它是 JupyterLab 扩展,我只能访问主选项卡 space(不是左侧或顶部菜单)因此 v-app 环绕在 HTML 元素周围,这是主选项卡区域,而不是全屏。
我认为 Vuetify 代码中围绕此函数的某处可能存在错误:https://github.com/vuetifyjs/vuetify/blob/054555a42e2ef368df2d6e168d1eec7fc06fb12c/packages/vuetify/src/components/VSelect/VSelect.ts#L456
我已经解决了所有 CSS 问题
通过在 UI 中添加适当的组件和细分来重构网格布局。添加了对单选按钮的修复。添加了 css 依赖项,material 图标依赖项,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>
我在使用 Vuetify 时遇到了各种 CSS 问题,我希望有人可以帮助我解决这些问题。我在 Vuetify 中使用了拆分面板视图 (vue-split-panel),但 Vuetify 似乎无法始终如一地识别何时触发全列宽度,如下所示。我可以通过打开然后关闭 Chrome js 控制台来 "trigger" 完整的列宽(对于相同的拆分面板宽度)。 我将它放入一个代码箱中,以便它可以重现。这样做时,我发现了一个新问题,即单选按钮未显示。
https://codesandbox.io/s/split-view-test-7mlx1
如果您能告诉我如何调整沙箱以使响应正常工作,我将不胜感激!
应该是一个单选按钮:
此外,我无法在 codesandbox 中重现但我在我的应用程序(它是 JupyterLab 扩展)中遇到的问题显示在底部屏幕截图中:select 标签有边框线经历它。我试图找出某个地方是否存在 CSS 冲突,但不知道具体去哪里找。
此外,我还有一个问题,即 select 菜单与左侧菜单成比例偏移,出于某种原因...为什么打开左侧和顶部菜单会影响位置?我该如何解决?我试过使用 "attach" 属性 并向元素本身添加一个 id,或者创建一个父元素 div,但似乎都无法解决问题。
通过使拆分面板变宽并单击 multi-select,然后使其变窄并再次单击,这在沙箱中可以稍微重现。您会看到菜单在打开时发生了偏移。
不涉及 iFrame 的解决方案将是首选,是的,我确实用 <v-app>
包装了我的应用程序,但是由于它是 JupyterLab 扩展,我只能访问主选项卡 space(不是左侧或顶部菜单)因此 v-app 环绕在 HTML 元素周围,这是主选项卡区域,而不是全屏。
我认为 Vuetify 代码中围绕此函数的某处可能存在错误:https://github.com/vuetifyjs/vuetify/blob/054555a42e2ef368df2d6e168d1eec7fc06fb12c/packages/vuetify/src/components/VSelect/VSelect.ts#L456
我已经解决了所有 CSS 问题
通过在 UI 中添加适当的组件和细分来重构网格布局。添加了对单选按钮的修复。添加了 css 依赖项,material 图标依赖项,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>