I must arrange each item in a column vertically, regardless of whether they could align horizontally

As the title suggests, I am looking for a way to stack one element under another, similar to a chat application. Currently, when the message is long, it displays correctly, but if the text fits next to each other, it aligns in that manner. I require a solution for this issue and will provide an image for reference.

<div class="other_message" v-for="item in messages" :key="item.data" v-if="-- some condition --">
    {{ item.data }}
</div>
<div class="my_message" v-else>
    {{ item.data }[enter image description here][1]</div>

Below are the CSS styles:

.other_message {
    max-width: 60%;
    float: left;
    text-align: left;
    background-color: #DDDDDD;
    margin: 2px;
    padding: 8px;
    border-radius: 5px;
    display: inline-block;
}

.my_message {
    max-width: 60%;
    float: right;
    text-align: left;
    background-color: #448AFF;
    color: #FFFFFF;
    margin: 2px;
    padding: 8px;
    border-radius: 5px;
}
cssvue.js

Answer №1

To solve the issue of floating elements, simply include "clear:both;" in the CSS properties of the elements. This will effectively clear or ignore any floats above the specified element. For more detailed information on how to use the "clear" property, refer to the following link: MDN - Clear CSS

.other_message {
    max-width: 60%;
    float: left;
    text-align: left;
    background-color: #DDDDDD;
    margin: 2px;
    padding: 8px;
    border-radius: 5px;
    display: inline-block;
    clear: both; /* include this line */
}

.my_message {
    max-width: 60%;
    float: right;
    text-align: left;
    background-color: #448AFF;
    color: #FFFFFF;
    margin: 2px;
    padding: 8px;
    border-radius: 5px;
    clear: both; /* include this line */
}
<div class="other_message" v-for="item in messages" :key="item.data" v-if=" -- some condition --">
    {{ item.data }}
</div>
<div class="my_message" v-else>
    {{ item.data }}
[enter image description here][1]</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

Truncate a string in Kendo Grid without any white spaces

While using a Kendo-Grid for filtering, I've come across an issue where my cell does not display the full string if there is no white space. The problem can be seen in the image below: https://i.sstatic.net/0h1Sg.png For example, the string "https:/ ...

htmlcssangularfrontendkendo-grid

The clear function in the template slot of Vue multiselect is not functioning properly

I decided to incorporate the asynchronous select feature found in the documentation for my project. This feature allows me to easily remove a selected value by clicking on 'X'. Below is a snippet of the general component that I use across variou ...

javascriptcssvue.jsvue-multiselect

When a div is floated to the left and another div is floated to the right, the

I would like the footer to display an image aligned to the left and some additional text (an inline ul with links) aligned to the right within the footer. Here is the CSS & HTML: footer { clear: both; background: #113551; width: 90%; ma ...

htmlcssbackgroundcss-float

Techniques for adjusting the dimensions of a select dropdown using CSS

Is there a way to control the height of a select dropdown list without changing the view using the size property? ...

htmlcss

Delete the line height (or leading) for bigger text in CSS

Is there a way to eliminate the space above and below the mandatory span, specifically when using << within it? The height of the field row is determined by the default line-height for the text size, but the mandatory field is taller due to its larg ...

htmlcss

Conceal HTML Table Rows

I have a HTML table that showcases items and their respective daily information - usage, incoming shipments, and inventory. The goal is to initially hide the first two columns and reveal them on mouseover using jQuery. I am planning to assign a class to ea ...

htmlcss

Alternating CSS Designs for Displaying Multiple Mysql Query Results

I have a website where users can search for a specific product in their location, and the site will display a list of results. if(isset($_POST['zip'])){ $qry="SELECT business_id FROM ".TBL_BUSINESS." WHERE zip LIKE '%".$_POST['zip&apos ...

phpmysqlcss

Top-to-Bottom Border Vanishing

I have a div that has a left border with the following style: border-left: 3px solid #F90; Now, I want the border to fade out gradually from top to bottom, going from full opacity at the top to completely transparent at the bottom. However, my attempt usi ...

htmlcss

Styling CSS code to centrally align a background image in the footer of a

Within my MVC app, there is a footer displayed on every page that includes an image. I am looking to align the image in the center if possible. The current CSS code for the footer is as shown below: footer { position:absolute; bottom:-150px; /* Th ...

css

Is there a way to make the table header stretch across the entire table when using display properties to simulate a <table>?

I made a switch from an old table to a new one constructed using Divs, and everything seems to be working fine except for one issue. I am trying to create a header that spans the entire width of the table without having multiple cells in the heading like i ...

htmlcss

Utilizing vuex for Apollo pagination

Trying to incorporate vuetify's pagination component with the nuxtjs@apollo module has been quite a challenge for me. I'm facing difficulties making it work seamlessly with my vuex store. To avoid overwhelming you, I'll skim through most o ...

vue.jsgraphqlnuxt.js

CSS - owl carousel automatically stretches images to full width

Here is the code snippet that I am working with: $(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:true, items:4, autoplay:true, autoplayTimeout:2000, autoplayHoverPause:true }); }); #owl-demo ...

javascripthtmlcss

Position a button and input element in alignment

I recently decided to challenge myself by recreating the Netflix registration page as a practice project. Using the flexbox model on the webpage, I encountered an issue with aligning the email input and the "Get Started" button. Despite trying different me ...

htmlcssflexbox

The table spills over the container and disappears underneath the navbar

After downloading a template table from the internet and customizing it to my liking, I encountered an issue where it does not adhere to the assigned settings (as shown in the image), but that's not the only problem. The dropdown navbar on my website ...

htmlcssnavbarcss-tables

Getting rid of any excess space between columns within the same row in Bootstrap following a line

Exploring Bootstrap 3. When you test the following HTML and CSS code, everything appears as expected with no space above 768px. However, upon reaching that breakpoint, the divs start stacking on top of each other, which is fine. But suddenly, a mysterious ...

htmlcsstwitter-bootstrap

Sticky footer with overlapping DIV

I am working on a container with three nested divs: header, content, and footer <div class="note"> <div class="header">Title</div> <div class="content" contenteditable="true">Some content</div> <div class="fo ...

htmlcss

The component has been successfully registered, but it appears to be unused according to the Vue guidelines

Recently, I finished creating my component called EmployeeTable.vue. After completion, I exported it as: <script> export default { name: "employee-table" }; </script> However, when I tried to import it into App.vue using the following code: ...

vue.jsvue-component

Is there a way to modify the color of a checkbox within MUI?

I'm currently customizing the checkbox color in Material UI while using FormIk for data submission. I aim to change the default checkbox color to red, but I'm unsure about how to achieve this. <FormGroup> <Box display=" ...

cssreactjsformsmaterial-uiformik-material-ui

Is there a way to adjust the width of the b-form-select component?

My issue lies with the b-form-select element, as it defaults to a width of 100%. I attempted adjusting the width like so, but unfortunately it did not have the intended effect. <b-form-select v-model="xxx" :options="yyy" width: 50% ...

twitter-bootstrapvue.jsbootstrap-4bootstrap-vue

What is the best way to position my header at the top of my navigation bar?

I am new to the world of HTML and CSS! My goal is as follows: https://i.stack.imgur.com/hmLNS.png This is my progress so far: https://i.stack.imgur.com/rav8P.png I am also looking to have the header fill the entire browser window and remain fixed, wit ...

htmlcss