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

What is the best place in Rails to add @media CSS tags?

Currently, my layout.html.erb contains some CSS rules with @media queries. <style> @media (max-width: 900px) { .green-button{ display: none!important; } .chat_button{ margin-top: 20px!important; } #myCarousel{ ...

Tips on ensuring the <script> section of a Vuejs single file component loads prior to the <template> section

After posing my query here, I have come to the realization that the root of my problem might be due to the template loading before the script. This causes an error when it encounters an undefined variable, halting the script execution. The issue could pote ...

Several dropdown menus within the same container, working independently of each other

I recently encountered an issue with a drop-down navigation bar. When I have multiple drop-downs and click on one, it opens as expected. However, if I then proceed to click on another drop-down while the first one is already open, both of them remain open ...

Use Javascript to display an image based on the date, otherwise hide the div

I'm looking to implement an image change on specific dates (not days of the week, but actual calendar dates like August 18th, August 25th, September 3rd, etc). Here's the div I'm working with: <div id="matchday"> <img id="home ...

Guide to accessing component methods within slots using the Vue 3 Composition API

I have child components within a slot in a parent component and I am trying to call methods on them. Here are the steps I followed: Use useSlots to retrieve the child components as objects Expose the method in the child component using defineExpose Call t ...

The jquery methods might encounter an issue with an undefined object

I have been attempting to implement a function that triggers when the user reaches the bottom of the window, but TypeScript is flagging errors and mentioning potential undefined objects related to window.scrollTop(), height(), and document.height(). Even ...

What steps should I follow to customize the Bootstrap link template according to my requirements?

In the bootstrap documentation, the links are shown in blue by default. I want them to be white instead. How can I make all the links white if the documentation is ignoring my CSS files? ...

Add a font awesome icon dynamically using JavaScript

I'm currently working on a navigation bar in JavaScript that displays the titles of various links. However, I would like to enhance it by adding small icons next to the text. Can anyone guide me on how to integrate Font Awesome icons into my JavaScrip ...

Words within a string are divided in the center, with JS and CSS involved

I'm currently working on developing a hangman game in JavaScript (I am new to web technologies) and I have come across my first challenge. The placeholder string for the word to be guessed, which consists of hyphens and spaces, is overflowing from the ...

Altering the height of cells in a table for HTML emails being sent to Gmail accounts

When attempting to send an HTML email from Outlook 2013 to Gmail, I have encountered a significant gap between the rows. Despite my efforts, I have been unable to adjust the row height. I am seeking advice on how to resolve this issue. Here is the code s ...

How to make a div stretch to full browser height using CSS and jQuery

I've been attempting to stretch a div to the browser's height using CSS in jQuery, but it doesn't seem to be working. I can successfully apply 100% width to the div, but height is proving to be a challenge. Any ideas why this might be happen ...

Preserve the div's aspect ratio using CSS styling

Is there a way to design a flexible div element that adjusts its width and height in sync with the window's size changes? Do any CSS techniques exist that would allow the height of the div to adapt based on the width, while still preserving its aspec ...

Maximizing the width of navbar elements with Bootstrap 3

I am currently working on building a webpage with bootstrap3, but I have encountered an issue with the navigation bar. I would like the navigation links ("Web Design", "Development", "Photography", "Blog") to be evenly spaced out within the horizontal na ...

The header that sticks on scroll is annoyingly blocking the content

I managed to create a sticky on-scroll header/navigation bar successfully. Here is how it looks now However, I encountered an issue. When it reaches the top, it automatically 'covers' the top part of my content, which has text on it, and I don& ...

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

Replacing inline CSS with styled components in Next.js Sass modules

In order to display emoji icons in my Next.js App, I utilize the Twemoji library. These emojis are rendered as <span><img></span> elements in the final HTML output. To customize their default width and height, I use the !important rule in ...

Is anyone else experiencing differences in the appearance of my mega menu between Safari, Firefox, and Chrome? It seems like

When viewing in Safari, the text overlaps for some reason. It works fine on Firefox and Chrome. Here's a screenshot of the issue: Safari: https://i.stack.imgur.com/hf7v2.png Firefox: https://i.stack.imgur.com/NrOOe.png Please use Safari to test th ...

How can I utilize Material-UI's Grid component to make a single cell occupy the entire remaining horizontal space?

I am currently utilizing the Grid component from material-ui in my React 16.13.0 application. My objective is to create a row with three items. The first two items are supposed to occupy only the required space without specifying pixel values. I want the t ...

Instructions on how to automatically navigate to a different tab upon clicking an <a> element on a separate webpage, and subsequently display the designated tab on that

I have a button on my home page that, when clicked, should open a specific tab section on another page. The button is located on one page and the tabs are on a different page. On the second page, I have multiple tabs but will only mention one here, which ...

Tips for adjusting the size of an image in both the vertical and horizontal axes using CSS

As a beginner in HTML, I am currently facing an issue while trying to display a set of pictures. My goal is to resize the pictures based on the current window size while maintaining the aspect ratio. Despite experimenting with various methods like using wi ...