CODEWITHSUNDEEP
htmlcssvue.js
TheDevGuy
TheDevGuy

Reputation: 703

Grow a div without moving anything else

I have 4 div (red, yellow, green, blue ) In my case, I have 2 per row. I need to grow the second (yellow) without having a gap under the red, only the blue must be going down to follow the yellow.

I have a code pen If you want try . Code

<div id="app">
  <v-app id="inspire">
    <v-item-group>
      <v-container>
        <div class="row">
          <v-col
            v-for="(item, index) in colors"
            :key="index"
            cols="12"
            md="6"
          >
              <v-card
                class="align-center"
                height="auto"
                :color="item.color"
              >
                <v-card-text v-for="(c, ind) in item.content" :key="ind" @click="colors[index].content.push(c)">{{c}}</v-card-text>
              </v-card>
          </v-col>
        </div>
      </v-container>
    </v-item-group>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    colors: [{color: 'red', content: ['sample content']},
            {color: 'yellow', content: ['sample content']},
            {color: 'green', content: ['sample content']},
            {color: 'blue', content: ['sample content']}]
  }
})

Upvotes: 1

Views: 183

Answers (1)

chans
chans

Reputation: 5260

It is possible to have divs grow without spaces, You need to use display : flex and flex direction

In the below code, I've considered tow columns of colors growing vertically

You can have N number of colors

Working codepen here: https://codepen.io/chansv/pen/GRROyQZ?editors=1010

<div id="app">
  <v-app id="inspire">
    <div>
    <div  style="width:50%; float: left;display: flex;
  flex-direction: column;">
      <div  v-for="(color, index) in colors" :key="index" v-if="index % 2 == 0 && index == 0">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
      <div v-for="(color, index) in colors" :key="index" style="flex-grow: 1;" v-if="index % 2 == 0 && index != 0">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
    </div>

    <div  style="width:50%;float: left;display: flex;
  flex-direction: column;">
      <div v-for="(color, index) in colors" :key="index" v-if="index % 2 == 1 && index == 1">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
      <div style="flex-grow: 1;" v-for="(color, index) in colors" :key="index" v-if="index % 2 == 1 && index != 1">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
    </div>
    </div>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    colors: [{color: 'red', content: ['sample content']},
            {color: 'yellow', content: ['sample content']},
            {color: 'green', content: ['sample content']},
            {color: 'blue', content: ['sample content']},
            {color: 'pink', content: ['sample content']},
            {color: 'grey', content: ['sample content']},
            {color: 'orange', content: ['sample content']},
            {color: 'indigo', content: ['sample content']},
            {color: 'purple', content: ['sample content']},
            {color: 'cyan', content: ['sample content']},
            {color: 'teal', content: ['sample content']}]
  }
})

Upvotes: 1

Related Questions