Guide to adjusting column size across various screen resolutions using Vuetify grid

For my Vue and Vuetify dashboard, I have opted to use the grid system in Vuetify's library to structure the layout. However, I am encountering an issue where the appearance varies depending on the screen resolution. Is there a way to keep the left container always the same width as the side drawer?

I attempted to manually set the max-width of the sidebar to 300px, but it did not produce the desired result.

<v-container grid-list-md text-xs-center>
    <v-layout row wrap>
      <v-flex xs3 class="side">
        <SideBar/>
      </v-flex>
      <v-flex xs9 class="main" >
         <MainPage/>
      </v-flex>
    </v-layout>
  </v-container>

Expectation:

https://i.sstatic.net/l5skQ.png

Reality:

https://i.sstatic.net/f3UGl.png

Generated HTML/CSS code: https://pastebin.com/bLYgv5pz

cssvue.jsvuetify.js

Answer №1

To put it simply, the 3-column area is intentionally set to always be 25% of the container width in grids like this. If you wish to maintain the sidebar's size equal to that of the 3-column section, you can apply max-width:100%;

While I may not have direct experience with Vuetify's styling, by sharing the generated HTML and CSS, I can provide recommendations on how to limit the expansion of that particular column.

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

Having Trouble Finding Vue Component Definition Using Vite Alias in Import Path

When I click on the Component within the code snippet: import Component from '@/components/Component.vue'; I am unable to navigate to its definition when using vite alias. Seeking a potential solution. ...

javascriptvue.jsvisual-studio-codeimportvite

Tips for concealing text adjustments during window resizing in an HTML document

I'm currently working with a website code that involves two sidenavs, one on the right and another on the left. When one sidebar opens, the other collapses. However, I've noticed that the text in between readjusts when the sidebars are toggled op ...

javascripthtmlcss

I'm attempting to retrieve information from my vuex store, however, encountering an error in the process

I've encountered an issue with vuex getters while working on my project. I have a route that showcases all users, and upon visiting this route, the AllUsers.vue component is displayed. Within this component, I'm utilizing the UsersList.vue compo ...

javascriptvue.jsvuexvuejs3website-deployment

Having issues with the sidebar malfunctioning and unsure of the cause

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> I've been working on creating a sidebar for my website, but it's not functioning as expect ...

javascriptjqueryhtmlcss

Steps for splitting a numbered list and adding an image above each item:

I have a challenge I'm trying to tackle with my list: My goal is to create a long, numbered list that is divided into different sections I also want to include an image within each list item and have it display above the numbered title of the sectio ...

htmlcss

The height of a div element does not automatically default to 100% in Next.js

I'm encountering an issue with styling pages in next.js. My goal is to create full-height pages. Although I've successfully set the height attribute in the body and html tags to achieve full height (verified in dev tools), I'm struggling to ...

htmlcssnext.js

Is it permissible to employ both CSS pseudo-elements, namely before and after, on a single selector in this instance?

Seeking to create a visually appealing horizontal menu navigation resembling: {image1} ITEM1 [separator1] {image2} ITEM2 [separator2] etc. However, a constraint exists - the HTML structure must remain unchanged. Can this be achieved solely with CSS us ...

csscss-selectors

Is there a reason why the slide up feature is not working when I include the ul tag?

I need help with a jQuery code that will pull up/slide up an Html "p" tag when my page finishes loading. This snippet of jQuery code seems to be working fine: $(function () { $('.graybgc').slideUp(0); }); This is the HTML structure: <p ...

javascriptjqueryhtmlcss

Conceal the column title for order items in the WooCommerce admin panel

I've been attempting to hide certain columns within the administrative section of Woocommerce, but have had no success with the code I'm using. I'm currently stuck and my question is: Is there a way for me to conceal specific column names i ...

csswoocommerceorders

Background color applied to row elements in div containers

I've been experimenting with integrating table content into CSS floats, but I'm facing some challenges. My current strategy involves using divs at the "table," "row," and "cell" levels. However, I'm not convinced that this is the most effec ...

css

Exploring the depths of Vue.js: Maximizing potential with nested

In my Grid component, I retrieve JSON data from a server and render it. The data mainly consists of strings and integers, but sometimes includes HTML elements like <strong>myvalue</stong>. In order to properly display the data, I use triple bra ...

javascriptvue.js

Encountering a ModuleBuildError while setting up Tailwind CSS in Laravel 8

I am currently learning Laravel version 8 and encountered an issue while trying to install Tailwind CSS using the npm command. npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 Here is a detai ...

cssnpmlaravel-mixtailwind-csslaravel-8

What is the process for deducting the ordered quantity from the available quantity once an order is confirmed

Although I'm not a fan of hard coding, I've been struggling to find a solution to my problem and some explanations are just not clicking for me. The issue at hand involves three data products in the cart, product details, and placed order data f ...

javascriptfirebasevue.jsgoogle-cloud-firestore

The addition of '?#' to the URL causes the page to be reloaded when Router.push is used

Upon clicking the sign-in button, this function activates and makes use of AWS Cognito: signIn() { let username = this.emailIn; let password = this.passwordIn; Auth.signIn(username, password) .then(user => { this.$router.push({ path: "d ...

vue.jsvue-router

Setting up a global store in Vue.js allows you to manage state

In my store, I have a setting that defines the possible user roles as 'admin', 'editor', or 'junior-editor'. Currently, I find myself importing my store and making the store variable available in the data section. Is there a ...

vue.jsglobal-variablesvuex

Altering the style of the underline for a hyperlink

I'm looking to customize the underline style when hovering over a link. Specifically, I want to change the color and size of the underlined link. const useStyles = makeStyles(theme => ({ button: { marginLeft: theme.spacing(2), }, }) ...

cssmaterial-ui

Is there a way for me to display information from a secondary child component by simply clicking a button on the main component instance?

Consider a scenario where there is a main instance, a child component named "movie-card," and another child component within "movie-card" called "link-btn." The objective is to create a selector that loops through the "link-btn" component using v-for. Addi ...

javascriptarraysvue.js

What is the process for filtering out a particular version of an npm package?

Here is my current configuration: "@vue/test-utils": "^1.0.0-beta.25" Can anyone recommend a way to exclude a particular version of this package while still using the caret ^ notation? I specifically need to exclude version 1.0.0-beta.31 as it has cause ...

javascriptnode.jsvue.jsnpmvue-test-utils

Having trouble submitting a date input form generated with vuejs on Safari browser

I am a huge fan of Vuejs and it's my go-to at work. The other day, I came across a rather perplexing scenario. If you have any insights into this, please do share. Here is the code in question: <script setup lang="ts"> import { ref ...

javascripthtmlvue.jssafari

Smooth scrolling feature malfunctioning in mobile view

While working on my website, I noticed that the smooth-scroll feature works perfectly on desktop browsers. However, on mobile devices, when I click on a link, it does not scroll to the correct position. It always ends up much lower than expected. Any idea ...

javascripthtmlcssbootstrap-4