Expand a div without causing any displacement to surrounding elements

If you have 4 colored divs (red, yellow, green, blue), with 2 per row, and need to expand the second (yellow) without creating a gap under the red, check out this solution. The blue will be positioned underneath the expanded yellow.

For a live example, visit this CodePen link: 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']}]
  }
})

Answer №1

Expanding divs without gaps is achievable by utilizing display: flex and flex direction

In the following code snippet, I have implemented two columns of colors expanding vertically

You can include any number of colors

Check out the live demo on Codepen: 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']}]
  }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a method to make changes to files on a deployed Angular application without the need to rebuild?

After deploying my Angular application on a production environment using the command npm run build --prod --base -href, I now need to make changes to some static HTML and TypeScript files. However, since the app is already bundled and deployed, I'm un ...

Steps for converting a window to a PDF file rather than an XPS file

Whenever I attempt to print the contents of my HTML page using window.print(), it always creates an XPS file. However, what I really need is for it to generate a PDF file instead. Any assistance would be greatly appreciated. Thank you! ...

Implement a background image in the navigation bar links using CSS

Strange as it may seem, the image refuses to show up in the navbar. Adding borders or other styling makes it visible, but not the image itself. If I manually include the image using the <img/> tag in the HTML, it appears, but then the hover effect do ...

What are some ways to adjust red and green blocks using CSS?

One question that arises is how to create a version of a webpage where only the yellow block can slide up, while the red and green blocks remain fixed. Currently, the green block is treated with the following CSS: position:sticky; right:0px; top:100px; ...

Replacing the yellow autofill background

After much effort, I have finally discovered the ultimate method to remove autofill styling across all browsers: $('input').each(function() { var $this = $(this); $this.after($this.clone()).remove(); }); However, executing t ...

Live Server in VS Code not refreshing automatically as expected

My problem is with VS Code and Live Server for HTML CSS. I expected the page to automatically reload after editing my HTML, but that's not happening. Even though I have Auto-Save enabled, Live Server isn't updating or refreshing my page automati ...

Cross-origin resource sharing problem arises when JavaScript is loaded asynchronously using script tags created dynamically

By dynamically creating a script as shown below, the JavaScript source is downloaded asynchronously. let newScript = document.createElement('script'); newScript.src = srcUrl; let firstScript = document.getElementsByTagName('script')[0] ...

Do I need to utilize a Form element?

<p>text 1<span>additional information 1</span><span>more details</span></p> <p>text 2</p> <a> hyperlink </a> <button>submit</button> <p>yet another paragraph</p> Greeting ...

Issue with displaying errors in vee-validate when using Vue.js Axios (More details provided)

When working on my Vue project, I encountered an issue while using Vee-Validate and Axios. During an API call to register a user, if the email is already in use, an error is thrown. To handle this error and display the error message, I used the following ...

The functionality of cloning in jQuery may encounter an issue where the text field remains enabled if the user selects an option labeled "other

Currently, I am working on a jQuery clone with my existing code and everything is functioning well. In the first scenario, if the user selects other from the dropdown menu, the text field becomes enabled. In the second scenario, when the user clicks ...

vue-awesome-swiper / The button's name is synchronized, causing all other swiper elements to move in unison

<template> <swiper v-for="item in items" :key="item.id" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slid ...

Activate modifications in a distinct column?

I've been exploring a solution to achieve a similar functionality where clicking or hovering on headings in a column brings up corresponding text in another column. My idea is to use list items with a carousel for this purpose, but I'm facing so ...

Modify the class of the dropdown and heading 2 elements if they meet specific conditions using Animate.css

Is it possible to add a class using jQuery when two specific conditions are met? 1) If the dropdown selection is either "acting" or "backstage" 2) If the membership status is set to "Non-member" If both of these requirements are fulfilled, I would like ...

Issue with relative input causing Jquery click event to not fire

Jquery $(document).on("click","[type=text]",function(event) { alert('test'); }); CSS .noWorking:focus{ z-index:100; position:relative; outline:none; box-shadow:0 0 0 1000px rgba(0,0,0,.2); } To ensure the shadow appears on top of all oth ...

Using a Vue computed method to compare elements in two separate arrays

Presently, I am utilizing Vue v2.x.x and dealing with an array: sectionTitles = ['Technology', 'Data', 'Poverty and Research', ...] Additionally, I have jobsData structured like this: [{'title': 'Software Engin ...

Display the chosen alternative in a Bootstrap dropdown menu

I am currently facing an issue with the dropdown list in my bootstrap menu. <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="c ...

Identify input elements that specifically contain an onclick event

Several of the input elements on my page have a function called setSomeFunction() that either shows or hides certain divs when clicked. I know I can locate all the input elements using document.getElementsByTagName("input") and store them in an array. How ...

Importing JSON data from a URL to display in an HTML table

Looking to utilize the Untappd API for a beer menu project, I've encountered an issue. The goal is to showcase the JSON data received from the server and organize it into an HTML table. Despite successfully importing data from a local list.json file ...

Controlling Formatting in ASP.NET

Feeling puzzled by a seemingly simple question with no clear solution in sight. We're attempting to transition an interface to an ASP.NET control that currently appears like this: <link rel=""stylesheet"" type=""text/css"" href=""/Layout/CaptchaLa ...

Using PHP to output HTML tags as text

How can I display an HTML tag as text on screen, rather than in code format? I want readers to be able to easily read the tag itself. What is considered the best practice for achieving this? print htmlspecialchars('<meta name="copyright" conten ...