cssvue.jsvuetifyjs3

Why does the width of "v-col" change when I add "bg-red rounded" class?

I'm trying to arrange the data in blocks using vuetify. The width of the "v-col" gets changed when I add "bg-red rounded" class to it. So I'm unable to get the desired grid structure.

This is the template part of my Vue file. I have removed the data inside the column in few places since I couldn't reveal the exact code.

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-container class="bg-red rounded">
          <v-list class="bg-red font-weight-bold pa-0">
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="6"> CODE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="5"> 5568 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="6"> PLACE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="5"> B </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="6"> CODE</v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="5"> 123 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="6">EXAMPLE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="5"> 23456 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="6"> RANGE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="5"> 1-10 </v-col>
              </v-row>
            </v-list-item>
          </v-list>
        </v-container>
      </v-col>

      <v-col>
        <v-container class="bg-red rounded">
          <v-list class="bg-red font-weight-bold pa-0">
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5"> DATE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6"> April-29-2024 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5"> TIME </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6"> 03:55:28 PM IST </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5"> ADDRESS </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6"> CBE </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5"> EXAMPLE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6">123 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5"> VERSION </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6"> 2.0 </v-col>
              </v-row>
            </v-list-item>
            <v-list-item>
              <v-row col="12" no-gutters>
                <v-col cols="5">EXAMPLE </v-col>
                <v-col cols="1"> {{ `\t:` }} </v-col>
                <v-col cols="6"> 00000 </v-col>
              </v-row>
            </v-list-item>
          </v-list>
        </v-container>
      </v-col>
    </v-row>

    <v-list class="bg-red font-weight-bold mt-10 rounded">
      <v-list-item>
        <v-row col="4" no-gutters>
          <v-col cols="2" no-gutters> </v-col>
          <v-col
            cols="2"
            no-gutters
            class="rounded-pill text-center"
            justify="center"
            style="width: 164px"
          >
          </v-col>
        </v-row>
      </v-list-item>

      <v-list-item>
        <v-row col="4" no-gutters>
          <v-col cols="2" no-gutters>
            {{ $t(`reader_status.label.ptpSatus`) }}
          </v-col>
          <v-col
            cols="2"
            no-gutters
            class="rounded-pill text-center"
            justify="center"
            style="width: 164px"
          >
          </v-col>
        </v-row>
      </v-list-item>

      <v-list-item>
        <v-row col="4" no-gutters>
          <v-col cols="2" no-gutters> </v-col>
          <v-col
            cols="2"
            no-gutters
            class="rounded-pill text-center"
            style="width: 164px"
          >
          </v-col>
        </v-row>
      </v-list-item>

      <v-list-item>
        <v-row col="4" no-gutters>
          <v-col cols="2" no-gutters> </v-col>

          <v-col
            cols="2"
            no-gutters
            class="rounded-pill text-center"
            justify="center"
            style="width: 164px"
          >
          </v-col>
        </v-row>
      </v-list-item>
    </v-list>
  </v-container>
</template>

The code is rendered this way

Now, I want to fill the background color inside the remaining space of the left column where is no data. So when I tried to add background color to both columns like this

 <v-col class="bg-red rounded">

I can see the width of the columns getting changed. Width of both the columns getting changed

Why does this happen? And what is the ideal way to arrange these grids in an aesthetic way (The width of the top block (having 2 columns) = The width of the bottom block ) ?

Solution

  • The size and shape of the v-col did not change, it's only apparent what the true size/shape is once you add the red background color.

    Your first screenshot actually shows the size and shape of the inner v-container (which doesn't use the full height of the v-col and is constrained horizontally with padding).

    The red background on v-col fills in this space that the v-container wasn't using. You should be able to use your browser's DOM inspector to verify this.

    v-col true size

    A solution would be to add the background-clip CSS property so that the background color does not extend into the element's padding so you keep the look of the spacing between columns.

    <style scoped>
.v-col.bg-red {
  background-clip: content-box;
}
</style>

    Vuetify Playground example