Tips on aligning a v-btn alongside v-expansion-panels on the same row

Struggling with aligning my layout. Trying to get a single set of v-expansion-panels and a v-btn in the same row, both visually centered within a card. I managed to almost achieve it in this codepen: https://codepen.io/anzuj/pen/PoPPbdw with the following structure:

      row
      / \
    col  col
 (panel) (btn)

Issue: The minimum width of v-col creates white space around the button, throwing off the visual centering of the card content. Seeking guidance on how to either:

  1. Make the v-col surrounding the v-btn the same width as the v-btn
  2. Achieve the layout without using the grid system

Thanks in advance for any input!

Answer №1

It seems like everything you have done is correct so far. The only adjustment needed is to nest the <v-container> inside the <v-card-text> for proper alignment. Additionally, the button on the right should only have a col-1 width, not col-2. If you don't specify a col width for the element containing the button, it will take up the full space and affect the alignment of the container as well. Another solution would be to set the width of the container using CSS like this:

<v-container style="width:600px;">

<v-card color="grey lighten-3">
  <v-card-text>
    Question: How can I visually center the margin on both sides of the v-col with the <v-icon color="green">mdi-check</v-icon> button that currently has a minimum column width? 

   <v-container> //Either give a width here style="width:600px;"
      <v-row v-for="(item,i) in 5"
        :key="i" class="mb-1" no-gutters justify="center">
        <v-col cols="10">
          <v-expansion-panels>
            <v-expansion-panel>
              <v-expansion-panel-header>Item</v-expansion-panel-header>
              <v-expansion-panel-content>
                  Lorem ipsum dolor sit amet
               </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-col>
        <v-col> //or set cols="1" here
         <v-btn class="closeBtn mb-1 ml-1" width="36px">
           <v-icon color="green">mdi-check</v-icon>
         </v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-card-text>
 </v-card>

Answer №2

To solve the issue, I calculated the necessary width of the v-col containing the button and added inline styling within the v-for loop like this:

<v-col cols="1" style="max-width:40px">
. Check out the updated code on my pen: https://codepen.io/username/pen/ABCDE

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

Populating and dynamically sorting a v-select component in Vuetify

I am working on populating and sorting an array dynamically for use in a v-select component. However, I am encountering the es-lint warning 'unexpected side-effect in computed property' because I am modifying objects within that function call. Is ...

Invoking a child component's method using a parent event

Hello, I am a newcomer to VueJS and JavaScript and would greatly appreciate your assistance. I am facing an issue with my method "greet" not working, and I am uncertain as to why. When I click on the button "change to bar," I receive the following error: ...

Tips for horizontally aligning a list with sublist using CSS

Is there a way to align a horizontal list with a sublist in HTML and CSS? I want the menu items (Home, News, etc.) to be on one line, with submenu items below them. HTML <body> <div class="menu"> <ul class="menu_l ...

Tips for properly managing authentication information

Currently, I am working on a practice project using Vue 3 with Django Rest Framework. My goal is to implement token authentication validation. After a user successfully logs in, a token is generated. However, I encountered an issue where the generated to ...

What is the best way to use checkboxes in VueJS to apply filters on a loop and display specific results?

I'm struggling with implementing filters using checkboxes on a list of results and could really use some assistance. Currently, only the 'All' option is working for applying any filtering logic. Here is how my HTML looks like with the filt ...

Showing an error message without causing any displacement of elements positioned underneath

Is there a way to insert an error message text without displacing the element by 4 units using CSS or Javascript? ...

Create a visually stunning CSS3 animation within a specified container, mimicking the style shown in the

I'm currently working on creating the animation depicted in the image below: https://i.stack.imgur.com/W69EQ.jpg My goal is to develop a video slider where, upon clicking a button, the video will seamlessly shift to the right within its parent conta ...

Is it acceptable to debut a full-screen iframe widget compared to an embedded one?

My current project involves integrating a custom widget into users' websites for my application. I am considering using an iframe as it seems to be the most efficient option for several reasons: Utilizing the custom framework of the application will ...

Does the use of CSS positioning impact the performance of browser rendering?

Given two DIVs, A and B, where A contains B, and the following CSS styles: A { margin-left: -2000px; } B { margin-left: 2000px; } With these CSS styles applied, the position of B remains unchanged compared to its original position without any CSS. I am c ...

The deep linking feature may fail to function properly when using a redirect URL

Hello there! So I've been using Capacitor with VueJS and everything is running smoothly, except for one small hiccup. My deep link functions perfectly fine, but it seems to hit a roadblock when it's a redirect URL. My goal is to integrate oauth2 ...

The HTML embed element is utilized to display multimedia content within a webpage, encompassing

Currently, I am working on a static website for my Computer Networks course. Students need to be able to download homework files in PDF format from the website. I have used embed tags to display the files online, but I'm facing an issue where the embe ...

Function returning undefined when accessing prototype property in JavaScript

When attempting to create an image rotator using prototypal inheritance, I am encountering an error in the console showing: TypeError: this.curPhoto is undefined this.curPhoto.removeClass('previous'); I have placed this code in the callb ...

The state of vuex does not reveal its length

Within the vuex state, there is a variable 'images' defined as an array. When I use console.log(state.images), it shows output in this format: [__ob__: Observer] 0: {…} 1: {…} 2: {…} 3: {…} 4: {…} length: 5 __ob__: Observer {value: Arr ...

The mobile menu toggle functionality is malfunctioning on actual mobile devices, however, it is operational when tested on various mobile sim

Recently, I noticed that on , the menu collapses into a hamburger icon for mobile. However, when tapping on it on my phone and other devices, nothing happens. Surprisingly, it works perfectly fine when clicking on it in mobile simulators within Google Chro ...

The custom CSS styling is triggered only when the page is resized in Bootstrap

Currently, I am utilizing bootstrap alongside my custom CSS. The issue I am facing is that some of the styling from my custom CSS only takes effect after resizing my browser window to a smaller size. My custom CSS seems to be applied when the website adapt ...

What could be the reason for the navigation bar menu items not showing up in the sample application of the twitter.bootstrap.mvc4 package?

After setting up a new MVC4 web application project in VS2012, I decided to add the http://www.nuget.org/packages/twitter.bootstrap.mvc4.sample/ nuget package. However, upon running the sample application, I encountered an issue where the navigation menu i ...

Applying CSS to align the first line to the left and right, while ensuring that wrapped lines are aligned to the

Struggling with CSS to align drink names and descriptions on a bar's menu. Want the name left aligned and the description right aligned, even if wrapped lines are also right aligned. Current progress can be seen at http://jsfiddle.net/H96XQ/ CSS: . ...

Switching classes in real time with JavaScript

I'm struggling to understand how to toggle a class based on the anchor text that is clicked. <div> <a id="Menu1" href="#">Menu</a> <div id="subMenu1" class="subLevel"> <p>stuff</p> </div> <div> <a i ...

What is the best way to determine the value of margin-left in inline CSS using jQuery?

Here is the code snippet I am working with: <div class="ongoing" style="width: +728px; margin-left: +12480px"> I need to extract the value of the margin-left property for scrolling purposes. The technique I used to retrieve the width value does no ...

Vue.js - Capturing a scroll event within a vuetify v-dialog component

Currently, I am working on a JavaScript project that involves implementing a 'scroll-to-top' button within a Vuetify v-dialog component. The button should only appear after the user has scrolled down by 20px along the y-axis. Within the v-dialog, ...