Issue with Vue2: DIV does not adjust height when using v-for loop

I have a div set up like:

<div class="pt-4">
  <h5>Genres:</h5>
  <div class="inline-block float-left" v-for="(genre, index) in moreData.genres" :key="index">
    <span v-if="index < moreData.genres.length-1" class="mr-2">{{ genre.name }},</span>
    <span v-else>{{ genre.name }}</span>
  </div>
</div>

However, when the content of the v-for statement is rendered, the height of the div remains unchanged. This results in the next element overlapping or floating over it. I tried adding "clear: both" but it doesn't seem like an elegant solution to me.

cssvue.js

Answer №1

After experimenting, I discovered that using "display: flex" solved the issue perfectly. It reacts to changes in content and adjusts the dimensions of the DIV accordingly.

Answer №2

It seems like you're facing an issue, but if I understand correctly you may want to try using flexbox

.flex {
  display:flex;
}
<div class="pt-4">
  <h5>Genres:</h5>
  <div class="flex">
    <div class="genre">
      <span class="mr-2">Name,</span>
    </div>
      <div class="genre">
      <span class="mr-2">Name,</span>
    </div>
      <div class="genre">
      <span class="mr-2">Name</span>
    </div>
  </div
</div>

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

Substituting HTML checkboxes with highlighted images for consistent display across different web browsers

I am looking to transform a list of HTML checkboxes into clickable images for the user to select or deselect. My goal is to create a similar functionality as shown in this video using just CSS if possible. I have successfully implemented it in Chrome wit ...

jqueryhtmlcsscheckbox

Issue with sticky navbar in parallax design

I have been working on a website where all pages feature a header and a navbar located just below it. As the user scrolls down the page, I want the navbar to stick to the top of the screen once it reaches that position. However, on one specific page, I am ...

javascripthtmlcss

Using ReactJS to dynamically change styles based on state variables can sometimes cause CSS

Currently delving into the world of React. Learning about states/props and the art of dynamically altering elements. I've set up the component states like this: constructor(props) { super(props); this.modifyStyle = this.modifyStyle.bind(thi ...

javascripthtmlcssreactjsweb-frontend

What is the best way to define coordinates or set margins for the autoTable component in jsPdf when using React js?

While working with the jsPdf library to create a PDF in React, I am encountering an issue where I am unable to set margins for the autoTable when there are multiple tables on a single page. Below is the code snippet: import React from "react"; ...

javascriptcssreactjsjspdfjspdf-autotable

Styling with CSS in Zend Framework

In the process of creating a website using Zend Framework, I have successfully implemented the header, footer, and all the necessary pages. However, I am facing an issue with integrating the CSS file located at public/css/styles.css. When running the webs ...

phphtmlcsszend-framework

What could be causing my CSS parallax effect to not work as expected?

I have been attempting to implement the parallax image technique following the Keith Clark tutorial, but I am facing difficulties in getting it to work correctly. Utilizing the skeleton CSS framework, my goal is to recreate an existing website in order to ...

htmlcss

Using a jQuery event to apply styles with CSS

Hello, I am using jQuery Easy UI on my webpage but feeling a bit confused. I want to create an input field that looks like a tagging field - meaning when the user types a separator character (let's say a comma), the word being typed will have its CSS ...

jquerycsstagging

Implementing auto-population of input field in Vue JS based on dropdown selection

I'm in search of a solution for automatically filling input fields in Vue.js. My form consists of various input types such as text, select dropdowns, and quantities. I want the vCPU, vRAM, and Storage Capacity fields to be filled with predefined value ...

javascriptvue.jsvuejs3

Webpack 5 now supports the mini-css-extract-plugin for efficiently extracting scss files

I am currently in the process of transitioning a webpack configuration from version 4 to include the mini-css-extract-plugin. However, I have encountered an issue where none of my first-party application CSS (SCSS) is being injected into the main app.css f ...

vue.jswebpacksasswebpack-5mini-css-extract-plugin

What is the best way to add a CSS rule to JavaScript?

animation: scaleUp 0.3s linear 0.4s forwards; animation: scaleDown 0.3s linear forwards; Greetings! I'm currently working on adding animations to my content filtering functionality. Specifically, I want to incorporate the aforementioned CSS rules in ...

javascriptcsssortinganimationfiltering

Ways to resolve issues with v-model rendering errors

I currently have code fragments within my index.blade.php file that look like this: The content section: . . . <div class="col-12 col-md-12 mb-3"> <label for="attachment" text-muted">Attachment</label> &l ...

javascriptvue.js

Hover over the Div element for inline effect

Hello all, I am currently working on running a while loop from a database to show different records. The twist is that these records are displayed as images, which makes it tricky to customize using standard CSS. To work around this, I'm implementing ...

phphtmlcss

Secret button concealed within a div, revealing only a helpful hint

On my website, there is a list of items where each item is represented by either a picture or a name enclosed in an <article> tag. Here is an example of how it looks: <article class="client-card"> <p><img width="211" height="106" ...

htmlcssstylesheet

Adjustment of Image Placement

I'm describing my desired outcome briefly - I want the inputs in the code to appear in the top left corner of a large image. Despite trying multiple approaches, I have been unable to achieve this layout. When considering 2 columns, the inputs should b ...

htmlcsscss-position

Unable to Display CSS Background

Hey there, I've been experimenting with CSS backgrounds to create a header line consisting of 5 equally sized portions, each in a different color. I'm having trouble getting the background to display properly. Below is the code I have written. An ...

htmlcssbackgroundbackground-image

As the height is expanded, the background color gradually infiltrates the body of the page

I am currently working on an angular application that utilizes angular-pdf. The controller and view function perfectly, and the PDF is displayed correctly, except for one issue. The height of the PDF exceeds the min-height of the module, causing it to expa ...

javascripthtmlcssangularjs

Issues with slots functionality in my VUE defineCustomElement component

I have put together this CustomElement initialization in VUE 3 by gathering information from various online sources such as documentation and Stack Overflow. However, I couldn't find any discussion on how to handle slots in this particular type of se ...

vue.jsvuejs3

In Wordpress, I am using Php to display posts. How can I create a new list item after every 3 posts, with each subsequent post displayed inside the new list item?

I am new to using PHP and feeling a bit confused with the code below, which is a team slider. In the <ul> tag, there is one <li> containing 3 nested <div>s (each representing a person). Can someone review my code and help me improve it? I ...

phphtmlcsswordpress

The embedded Google iframe is causing unnecessary padding at the bottom of the page

Below is a snippet of HTML code: <div class="google-maps"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109782.8671228349!2d76.62734023564995!3d30.69830520749905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fee90 ...

htmlcssiframe

Is there a way in JavaScript to disable a function's functionality?

I am dealing with a function that includes an if statement and an onclick function. My goal is to prevent the entire function from running if the if statement evaluates to true. I have attempted using return false, but it did not yield the desired outcom ...

javascriptecmascript-6vue.jsfrontend