CODEWITHSUNDEEP
vue.jsvuetify.js
ken mutesh
ken mutesh

Reputation: 45

How to make the centre card scroll only

I am planning to build a template like Twitter. I am stuck on how to make the card at the center scroll only leaving the other two cards.

I have created the three cards as shown in the picture, but at the moment, when I scroll, they all scroll.

I want the template to look similar to that of Twitter for computers.

enter image description here

Here is my code:

<template>
  <div>
    <v-row>
      <v-col lg="3" cols="12">
        <v-card class="mx-auto rounded-lg" elevation-10 tile>
          <v-img
            height="200"
            src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg"
          ></v-img>

          <v-col>
            <v-avatar size="100" style="position: absolute; top: 140px">
              <v-img
                src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"
              ></v-img>
            </v-avatar>

            <v-item-group
              style="float: right; display: flex; padding-right: 20px"
            >
              <v-item>
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon color="blue" dark v-bind="attrs" v-on="on">
                      mdi-grease-pencil
                    </v-icon>
                  </template>

                  <span>Edit User details</span>
                </v-tooltip>
              </v-item>

              <v-spacer />

              <v-item>
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon color="red" dark v-bind="attrs" v-on="on">
                      mdi-cog mdi-spin
                    </v-icon>
                  </template>

                  <span>Edit password</span>
                </v-tooltip>
              </v-item>
            </v-item-group>
          </v-col>

          <v-row>
            <v-col lg="4" cols="12">
              <v-list-item color="rgba(0, 0, 0, .4)"> </v-list-item>
            </v-col>
          </v-row>
        </v-card>
      </v-col>

      //scroll this
      <v-col lg="6" cols="12">
        <v-card>
          <v-list-item-title> Profile </v-list-item-title>
        </v-card>
      </v-col>

      <v-col lg="3" cols="12">
        <v-card>
          <v-list-item-title> Stats</v-list-item-title>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

Upvotes: 1

Views: 220

Answers (1)

Neha Soni
Neha Soni

Reputation: 4674

You can do it using flex classes and a little bit of CSS.

  1. Give some width to the left and right cards and a fixed position.
  2. Give the padding from both side of the same width to the middle card.

Here is a working demo-

#app {
  height: 100vh !important;
}
.fixed-l, .fixed-r {
  position: fixed !important;
  z-index: 1 !important;
  width: 200px !important;
}
.fixed-r {
  right: 0;
}
.scroll-me {
  padding: 10px 200px !important;
  width: 100% !important;
}
<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <v-app>
        <div class="d-flex" style="height:100%;">
          <v-card class="fixed-l pa-10" dark height="100%">
            Left Card
          </v-card>
          <v-card class="scroll-me" flat>
            <template v-for="i in 1000">
              I'll be scroll.<br>
            </template>
          </v-card>
          <v-card dark class="fixed-r pa-10" height="100%">
            Right Card
          </v-card>
        </div>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data () {
          return {
            property_name: null,
            selectedRooms: [],
            values: [],
            dialog_active: false,
            roomChoices: [
              { title: "bedroom", id: 1 },
              { title: "bedroom", id: 2 },
              { title: "kitchen", id: 3 },
              { title: "kitchen", id: 4 },
              { title: "bathroom", id: 5 },
              { title: "living-room", id: 6 }
            ],
          }
        }, 
      })
    </script>
  </body>
</html>

Upvotes: 1

Related Questions