CSS issues with Vuetify for responsivity using Vue-Split-Panel and select border

Question

I'm having a variety of CSS issues with Vuetify that I'm hoping someone can help me resolve. I'm using a split panel view (vue-split-panel) with Vuetify, but Vuetify doesn't seem to consistently recognize when to trigger the full-column width, as shown below. I'm able to "trigger" the full column width (for the same split panel width) by just opening and then closing the Chrome js console. I put this into a codesandbox so that it's reproducible. In doing so, I see a new issue that the radio buttons aren't showing.

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

If you're able to show me how to tweak the sandbox to make the responsivity work I'd so appreciate it!

Supposed to be a radio button:

Also, an issue that I can't reproduce in the codesandbox but I'm experiencing in my app (it's a JupyterLab extension) is shown in the bottom screenshot: the select label has the border line going through it. I tried to find if there is a CSS conflict somewhere but didn't know exactly where to look.

Furthermore I also have an issue that the select menu is offset proportional to the left menu, for some reason... why does opening the left and top menus effect the position? How can I fix it? I've tried using the "attach" property and adding an id to the element itself, or creating a parent div, but neither seems to solve it. This is ~slightly reproducible in the sandbox by making the split panel wide and clicking the multi-select, then making it narrower and clicking again. You'll see that the menu is offset when it opens.

Solutions that don't involve iFrames would be preferred, and yes, I do have my app wrapped with <v-app>, however since it's a JupyterLab extension I only have access to the main tab space (not the left or top menus) so the v-app is wrapped around the HTML element which is the main tab area, not the full screen.

I think there might be a bug in the Vuetify code somewhere around this function: https://github.com/vuetifyjs/vuetify/blob/054555a42e2ef368df2d6e168d1eec7fc06fb12c/packages/vuetify/src/components/VSelect/VSelect.ts#L456

Answer 1

I have resolved all the CSS issues

Refactotred the grid layout by adding the proper components and breakdowns in UI. Added a fix to radio buttons. Added the css dependencies, material icons dependencies, fonts which vuetify uses internally

Check for the working codepen here: 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>