Adjust the width of the flex columns?

In one of my columns, I have a list that I'm splitting using CSS to wrap the data in the next column after a specific height. However, in the demo, you'll notice there's a lot of white space between the first and second columns. I'm unsure how to make the list items fill up that white space.

new Vue({
  el: '#app',
  data() {
    return {
      lists: [ // List items are here... ]
    }
  }
})
.column_wrapper {
  display: flex;
  max-height: 100px;
  flex-flow: column wrap;
}
<!-- Scripts and links -->

Currently, it appears that the list is only expanding to the right. How can I make it expand or contract evenly to both sides?

Answer №1

To adjust the space taken by different blocks, you can use the shrink property for the one you want to take less space:

    <v-flex shrink>
     <h2>This is the first Column And there is a lot of space in between.</h2>
    </v-flex>

For the block you want to take more space, you can use the grow property:

    <v-flex class="column_wrapper" grow>
        <div v-for="list in lists" :key="list">
        <span class="title">{{list.text}}</span>
      </div>    
      </h1>         
    </v-flex>
  </v-layout>

Answer №2

As per the documentation on Vuetify, the v-flex component applies flex: 1 1 auto; this indicates that flex-grow is set to 1, which may not be the case for your .column_wrapper element. To address this, you have a few options: you can add width: 100% to .column_wrapper, set flex-grow: 0 for v-flex, or increase the flex-grow value for .column_wrapper.

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

Navigating through the nested object values of an Axios request's response can be achieved in React JS by using the proper

I am attempting to extract the category_name from my project_category object within the Axios response of my project. This is a singular record, so I do not need to map through an array, but rather access the entire object stored in my state. Here is an ex ...

the recurring pattern of media conditions in every single column

Hello, I'm currently involved in a project where I have implemented media conditions for my columns using Sass. Here is the code snippet: // Mobile media - 320px width @mixin mobile{ @media only screen and (max-width:767px){ width: 300px; } } B ...

Incorporate CSS file into the head section or directly within the HTML section without the need for JavaScript

I'm facing an issue with adding a CSS file to my webpage using JavaScript code at the bottom of the page. When users disable JavaScript, the file cannot be added. Is there a way to include the CSS file in the page without relying on JavaScript? $(doc ...

Pressing the submit button will not successfully forward the form

I've encountered an issue with my submit buttons - when I click on them, nothing happens. They were functioning properly before, but now they seem to be unresponsive. What could be causing this problem? <form id="contact" name="updateorder" acti ...

Utilizing JSON to transfer PHP array data for display using JQuery

Currently, I am working on a jQuery script that is responsible for fetching a PHP array from the MySQL database and converting it into a JSON object. The process is functioning correctly, as I can successfully output the raw JSON data along with the keys. ...

Using Sweetalert2 to send data via AJAX POST request

Recently, I've been incorporating SweetAlert2 into my project and I want to create an "Add Note" feature. The process involves the user clicking a button, being directed to a page, and then the following script is executed: <script>swal({ ...

What is the best way to incorporate jQuery and its plugins into a Vue component?

Is there a way to include jQuery plugins in a Vue application and use them inside the mounted hook? I know that jQuery can be imported via "import" inside a component (in the export default object) and is used in the life-cycle hook called "mounted." Howev ...

How to deliver various static files in NestJS using different paths and prefixes?

I've set up static file serving for developer documentation using the following code: app.useStaticAssets(docsLocation, { prefix: "/docs/" }) Now I have another directory with more static content that I want to serve. Is it possible to serve from ...

What is the best method for positioning span content above all other elements without having it wrap around them?

Each form element on my page is accompanied by a span that displays an error message, if applicable. The layout consists of two columns: left and right. I am struggling to make the span display seamlessly from the left column all the way across the page wi ...

How can you iterate over the input elements that are currently visible within a form using Javascript?

Is there a way to clear the values of all visible input fields in a form using JavaScript? I'm currently struggling with setting text inputs to empty as they come out as undefined. Any suggestions on how to achieve this? ...

Turn off Dart SASS notifications from external theme file

Is there a way to disable the warnings for third party SCSS files included in a project when using Dart SASS with Vue? I have a third party SCSS file that is triggering a long list of warnings, and I'm not sure if I am utilizing the quietDeps option ...

When the form is submitted, the value is not refreshed if the button is exited

I need to have a form where the save button is positioned outside of the form elements. However, when I move it elsewhere, the form does not refresh. <form ng-submit="save()" action="" name="addInv" novalidate> <div class="col-md-10 ...

What is the best way to set a default value for a specified Date format retrieved from an API?

Here are examples of different data formats for ReleaseDate: 2014-09-23 09:00:00.923Z /Date(1407369600210)/ If you want to access this information from an API, you can use the following object dot-notation: result.data.Items[0].ReleaseDate Sometimes, ...

Is there a way to seamlessly incorporate a PHP tag into a Bootstrap dropdown for perfect alignment?

In relation to this query: I have successfully integrated the if/else statement into the dropdown without any issues. However, upon using the dropdown on the website, I noticed that the item generated by the if/else statement – in this case, "log in" or ...

Customize the theme of Ant Design for VueJS

I have successfully set up my Vue3 application with Tailwind and Ant Design. However, I am facing issues with customizing the Ant Design theme. I have been referring to this guide. When trying to customize the theme, I encountered the following error: Err ...

Organize chat messages based on date using JavaScript

I came across a similar query, but it didn't resolve my issue. Check this out: How can I group items in an array based on date? My goal is to organize these chat messages by date after fetching them from the database using AJAX. The console displays ...

Utilizing jQuery for Populating Text Fields and Selecting Checkboxes

Is there a way to take user input and store it in a variable, then insert that information into a webpage like this one? To clarify, I'm looking for a way for an app to transfer data from a variable into an input field on a website (similar to the ex ...

Utilize node.js to run a local .php file within a polling loop

Here is the purpose of my application in brief. I am using a PHP file to read data via an ODBC connection and then write that data to a local database. This PHP file needs to be executed LOCALLY ON THE SERVER every time a loop is processed in my node.js, ...

The challenge of addressing relative URL issues when utilizing JavaScript's fetch() with a php file in a Vue application hosted on localhost

UPDATE: Changed the title of the question. Initially, it was: How to use a relative URL in a Vue application that functions in both production and development, but after further investigation, this was not the root cause as indicated in the comments below. ...

Json data integrated dropdown menu

I have successfully retrieved data from a Json array and displayed it in a dropdown list. However, I am facing an issue where I want to only show the name of the city instead of both the name and description. If I remove cities[i]['description'], ...