CODEWITHSUNDEEP
cssvue.jsvuetify.js
Philipp Chapkovski
Philipp Chapkovski

Reputation: 2069

How make two rows in Vuetify occupy exactly half of the screen

It seems like a trivial task, but I am lost.

I just want that upper half of the v-main would be occupied by one v-row and another half by another v-row and if the content of one row is larger, then it would be scrollable.

Here is the MWE: https://codepen.io/chapkovski/pen/abwPYda

The html:


<div id="app">
  <v-app id="inspire">
    <v-app-bar color="#6A76AB" dark app>
      &nbsp

    </v-app-bar>
    <v-main class='d-flex flex-column' app>
      <v-container fluid>
        <v-row class='yellow d-flex flex-column ' style='height:50%'>
          <v-col v-for='item in items'>{{item}}</v-col>
        </v-row>
        <v-row class='red' fill-height style='height:50%'>RED</v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

css:

.yellow {
  overflow-y: scroll;
  max-height:50%
}

and js


new Vue({
  el: "#app",

  vuetify: new Vuetify(),
  data: () => ({ items: _.range(1, 100) }),

  watch: {},
  methods: {}
});

Upvotes: 2

Views: 1199

Answers (1)

Igor Manoel
Igor Manoel

Reputation: 1493

You can use the breakpoints like described in https://vuetifyjs.com/en/components/grids/#usage

In this example, for small screens the column size will be 12 and for larger screens the column size will be 6, half the maximum size.

    <v-container class="grey lighten-5">
        <v-row no-gutters>
          <v-col cols="12" sm="12" md="6">
             a
          </v-col>
          <v-col cols="12" sm="12" md="6">
             b
          </v-col>
        </v-row>
      </v-container>

Upvotes: 1

Related Questions