CODEWITHSUNDEEP
vue.jsvuetify.js
Vinicius Andrade
Vinicius Andrade

Reputation: 578

Vue + Vuetify - Change v-col size depending on content

In order to keep it simple i'm going to post a simplified version of what i need to do.

Assuming I've the following component

<template>
  <div style="width: 50vw; height: 40vh;">
    <v-container fluid>
      <v-row  style="background-color: #222222" class="fill-height">
        <v-col cols="12" lg="8" xl="8" style="background-color: #ff0000"><h1>Breakpoint: {{$vuetify.breakpoint.name}}</h1></v-col>
        <v-col cols="12" lg="4" xl="4" style="background-color: #00FF00"><v-img  src="https://picsum.photos/256/256" min-height="256px" min-width="256px" max-height="256px" max-width="256px"/></v-col>
      </v-row>
    </v-container>
  </div>
</template>
<script>
export default {

}
</script>

Here is how it looks like on the browser:

XL LG-1

Here is where it starts to break. LG-2

MD SM XS

I need to have a responsive column that have a inside component with a fixed width and height.

Is there any thing that i can do to solve it?

Upvotes: 0

Views: 1583

Answers (1)

yoduh
yoduh

Reputation: 14649

If you don't specify a number of col widths for the first column it'll automatically try and use all the remaining space. cols="auto" can be used on the second column which will provide enough space for whatever content is inside. Together I believe they will accomplish your desired responsiveness. See this codesandbox as an example. Note the example also uses overflow-wrap: anywhere; on the h1 text to further prevent wrapping columns until absolutely necessary

Upvotes: 1

Related Questions