Tips for decreasing Vuetify Grid column width on larger screens

I'm currently utilizing the vuetify grid system to construct a reply component. The column ratio is set at 1:11 for the icon and reply columns, respectively. Below you'll find the code snippet:

<v-row justify="center" class="ma-0 pa-0">
    <v-col
      id="vote-col"
      cols="1"
      class="pa-0 d-flex flex-column align-center"
    >
      <v-icon size="24">mdi-thumb-up</v-icon>
      <span>{{ likes }}</span>
    </v-col>
    <v-col id="question-col" cols="10" class="pa-0">
      <v-row class="ma-0 replyFont">
        {{ reply }}
      </v-row>
    </v-col>
  </v-row>

While this setup appears good on smaller screens, issues arise as we reach screen sizes above 1100px. Even with cols="1", the width of the column becomes too extensive, leading to excessive space between the icon and reply columns. This is evident in the images below:

https://i.stack.imgur.com/eo2EF.png https://i.stack.imgur.com/RBCXN.png

Is there a solution to prevent the v-col from exceeding the necessary width? Considering that the minimum value for the cols property is 1, how have you dealt with this issue in your projects?

cssvue.jsvuejs2vuetify.jscss-grid

Answer №1

If you utilize the cols="auto" attribute, one column will adjust its width based on content, while leaving the other column to expand to fill the remaining space.

<v-row justify="center" class="ma-0 pa-0">
    <v-col id="vote-col" cols="auto" class="blue py-0 d-flex flex-column align-center">
        <v-icon size="24">mdi-thumb-up</v-icon>
        <span>0</span>
    </v-col>
    <v-col id="question-col" class="pa-0">
        <v-row class="ma-0 replyFont">
            ...
        </v-row>
    </v-col>
</v-row>

Check out the demonstration here:

Answer №2

When you set cols="X", it will utilize the Vuetify CSS class col-X with the following definition:

.col-X {
    flex: 0 0 YY%;
    max-width: YY%;
}

In this code, YY is calculated as 100/12 * X where X represents the value assigned to cols. The value of X must be a whole number and should not be lower than 1.

This essentially means that the minimum width of the column will be 8.33333... percent.

If you require a smaller or fixed width, you will need to apply your own styling using the max-width CSS attribute...

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

Error occurring when attempting to pass messages within an iframe on a sandboxed page in a Chrome extension

Whenever I try to utilize my popup page for a chromium extension as a conduit for communication between the background page and a page shown within an iframe on the popup, I encounter the following error. I required a sandboxed environment to execute Vue.j ...

javascriptvue.jsiframegoogle-chrome-extension

Preview multiple images while uploading with V-for in Vue JS

Having trouble displaying images in a loop using :ref I've implemented FileReader() to read the field. Vue Component <div v-for="(image, index) in imgFile" :key="index"> <img :ref="'image'+parseInt( index )"> {{image.name}} ...

javascriptvue.js

Switch out the content within a div upon selection

I'm currently working on a palette board project and facing some challenges when switching to a different theme. The initial page is set to have a Warm color palette, but I intend to alter this once the user clicks on the All theme option. Users wil ...

javascriptjqueryhtmlcssonclick

Issue with lazy loading not functioning properly on child routes within Vue.js

After recently implementing lazy loading on all my routers, I encountered an issue where I am unable to navigate to a child's router path. Removing the lazy loading resolved the problem, but I would like to find a solution that allows me to keep lazy ...

vue.jsvue-router

Conceal the Angular Bootstrap modal instead of shutting it down

I am utilizing Angular Bootstrap Modal to launch multiple modals, including a video player. http://angular-ui.github.io/bootstrap/#/modal My goal is to maintain the video's current position even when the modal is closed. This way, when I reopen the ...

javascriptcssangularjstwitter-bootstrap

Could an average user potentially access a hidden button meant only for management by examining a website and discovering how to activate it?

Create a website catering to both regular users and management. For instance, normal users are identified as 1, so if their account ID is also 1, they can access a page with limited functionality. Similarly, management is identified as 2, and they too acce ...

vue.jsquasar-framework

I am looking to conceal an element as soon as a list item is scrolled into view and becomes active

Is it possible to hide a specific element when the contact section is activated on scroll, and have it visible otherwise? How can this be achieved using Jquery? <ul class="nav navbar-nav navbar-right navmenu"> <li data-menuanchor="ho ...

jqueryhtmlcsstwitter-bootstrapshow-hide

What is the reason behind the inability to send an object from the parent component to a child component within a Vue 3 application?

I've encountered an issue while working on a Vue 3 app involving a component and its <User /> subcomponent. Within App.vue: <template> <Navbar /> <Sidebar /> <Content title="Users" /> <Footer ...

javascriptvue.js

HTML: Align DIV contents next to each other without any overlap

Below are three boxes displayed. Boxes 1 and 3 appear fine, but in box 2 the text content is overlapping. The issue lies with the <div> having the class .vertical_center.grade_info which has a specific margin-left of 100px, causing the overlap. I ne ...

htmlcssuser-interface

Arrange CSS to distribute list items across two rows with an unlimited number of items

I need my list items to be arranged in 2 rows like the following: item 1 item 3 item 5 item 7 item 9 .... item 2 item 4 item 6 item 8 ...... My CSS skills are not great, so I am struggling to find a solution for this. I have at ...

htmlcsslist

Exclusive Vue3 Props that cannot be used together

How can a component be created that accepts either json with jsonParserRules or jsonUrl with jsonParserRulesUrl, but not both? It would be ideal if the IDE could provide a warning when both props are specified. Example of an Attempt that does not Work < ...

typescriptvue.jsvuejs3

Modify the Color of Chosen Anchors for Site Categories WITHOUT Using JavaScript

Is there a way to change the color of section anchors in a fixed header when selected without using JavaScript? I'm looking for a CSS-only solution that will change the color of the selected anchor and revert it back to normal when another anchor is c ...

htmlcssanchorsections

Utilize the fitBounds feature from GoogleMaps in Vuejs for seamless integration

I've been working on getting the map boundaries to work properly, using a method in conjunction with my existing initMap and askGeolocation methods. Despite my best efforts, I can't seem to get the bounds functionality working so that the map zo ...

javascriptgoogle-mapsvue.jsgoogle-maps-api-3

The collapsible hamburger navbar is unresponsive and fails to collapse

Currently, I am working on a project that requires my navigation bar to be scaled down to a hamburger menu for mobile view. I have managed to do most of it, but for some reason, the navigation is not collapsing within the hamburger bar. I have been tweakin ...

jqueryhtmlcssresponsive-designhamburger-menu

Learn how to use Angular2 or TypeScript to display 'unsubscribe' and 'subscribe' text on a toggle button

I'm working on a toggle button that initially displays the word subscribe on the thumb. When the toggle is disabled, I want it to show unsubscribe instead. Can someone please help me achieve this functionality? Here's the code snippet: <md-s ...

javascripthtmlcssangulartypescript

What are the best ways to transfer state and event handlers as props to child components using Vue.js Router?

Initially, without routing involved, my Dashboard component looked like this: <template> <div> <RegistrationForm v-on:add-employee="addEmployee" /> <EmployeeTable v-bind:employees="employees" v-on:delete-employee ...

vue.jsroutesparameter-passingvue-componentvue-router

Updating Bootstrap Indicators with jQuery on Click Event

Unfortunately, I am unable to share an image due to limited internet data. My goal is to switch each image to its sprite equivalent. There are three list items that I'm struggling to change because they each have two classes that need to be updated. ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I use JavaScript to modify the style of the first unordered list (ul) element without affecting the

function displayMenu(){ var parentElement = document.getElementById("menuItem1"); var lis = parentElement.getElementsByTagName("ul"); for (var i = 0; i < lis.length; i++) { lis[i].setAttribute("style","display: block"); } } When the button is clicke ...

javascripthtmlcss

Animation of scrolling in a horizontal layout

Currently, I am utilizing ng-repeat 1.4 to dynamically generate elements within a div that has polymer shadow classes and uses the 'layout horizontal' style, resulting in code similar to: <div class='layout horizontal'> < ...

htmlcssangularjspolymerpolymer-1.0

Utilizing Jquery for independently blinking text counters

Whenever the user presses a button, a message is created and blinks 5 times. However, each time the button is pressed, all previous messages also blink along with the new one. The goal is to make only the new message blink individually 5 times upon each bu ...

javascriptjqueryhtmlcss