The static component on a vuetify.js v-sheet is not functioning as expected

Currently working on a site using vuetify, I have come across the following layout:

The issue arises when I apply absolute positioning to the copy-code icon. Upon scrolling horizontally through the code, I encounter this problem:

When attempting to switch from absolute to fixed positioning, for some reason, the icon no longer appears within the code snippet but instead in the top-right corner of the page:

Here is the code for the innermost component (the code snippet):

<template>
  <div>
    <v-fade-transition>
      <v-sheet class="code d-flex grey--text text--lighten-3 pa-4" :color="background" @mouseenter="showCopy = true" @mouseleave="showCopy = false">
        <v-fade-transition>
          <v-btn v-if="showCopy" flat icon class="copy" color="success lighten-3" @click="copyCode">
            <v-icon>content_copy</v-icon>
          </v-btn>
        </v-fade-transition>

        <v-layout column>
          <v-flex
            v-for="(row, index) of rows"
            :key="index"
            :class="getClass(index)"
            @mouseenter="rowEntered(index)"
            @mouseleave="rowLeft(index)"
            @click="rowClicked(index)"
          >
            <span class="orange--text text--lighten-3 mr-3 code-row">{{ getRowText(index + 1) }}</span>
            <span>{{ row }}</span>
          </v-flex>
        </v-layout>
      </v-sheet>
    </v-fade-transition>

    <v-snackbar v-model="showSnackbar" color="success">
      <span>Text copied to clipboard!!!</span>
      <v-btn dark flat @click="showSnackbar = false">Close</v-btn>
    </v-snackbar>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import copyToClipboard from 'copy-to-clipboard';

@Component({
  components: {}
})
export default class AppExamCardCode extends Vue {
  @Prop({ type: String, required: true })
  readonly code!: string;

  readonly color = 'grey';
  readonly darkenDefault = 'darken-3';
  readonly darkenSelected = 'darken-2';
  showCopy = false;
  showSnackbar = false;
  hovered = -1;
  selected: number[] = [];

  get background(): string {
    return this.color + ' ' + this.darkenDefault;
  }

  get rows(): string[] {
    return this.code.split('\n');
  }

  //rowClicked, rowLeft, rowEntered, getClass(returns only row background color, getRowText), 

  copyCode(): void {
    copyToClipboard(this.code);
    this.showSnackbar = true;
  }
}
</script>

<style scoped>
.code {
  border-radius: 12px;
  overflow-x: auto;
  letter-spacing: 0.5px;
  word-spacing: 1px;
  font-family: "Inconsolata", monospace;
  white-space: pre;
  font-weight: 300;
  font-size: 15px;
}

.code-row {
  letter-spacing: 0.8px;
}

.copy {
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
}
</style>

Contained within: (AppExamCardCodeExercise)

<template>
  <div class="code-exercise">
    <app-exam-card-code :code="exercise.code" />
    <app-exam-card-code-answer :solution="exercise.solution" :showAnswers="showAnswers"/>
  </div>
</template>

Contained within AppExamCardExercise:

<template>
  <div>
    <app-exam-card-true-or-false-exercise v-if="isTrueOrFalse" :showAnswers="showAnswers"/>
    <app-exam-card-code-exercise v-else :showAnswers="showAnswers"/>
  </div>
</template>

Contained within AppExamCard:

<template>
  <div>
    <v-scale-transition>
      <v-card v-if="show" class="exam-card" :class="cardClass" flat>
        <!-- omitted -->
        </v-toolbar>

        <v-card-text>
          <v-slide-y-transition mode="out-in">
            <v-layout row pa-5 :key="current">
              <v-flex xs12>
                <app-exam-card-score v-if="isFinished && showScore" />
                <app-exam-card-exercise v-else :showAnswers="showAnswers" />
              </v-flex>
            </v-layout>
          </v-slide-y-transition>
        </v-card-text>

        <v-card-actions>
          <!-- omitted -->
        </v-card-actions>
      </v-card>
    </v-scale-transition>
  </div>
</template>

Answer №1

The issue you're facing is due to the fact that the copy icon has a CSS property of position: absolute, while your code block (which includes a scrollbar) has a CSS property of position: relative, causing them to scroll together.

To solve this problem, change the CSS property of your code block to position: static. Then, enclose the code block in a div and set that div's CSS property to position: relative. This way, the copy button will be positioned relative to the parent container, which is not scrollable.

Here's how you can implement it:

<div class="fix">
  <code>
    <span class="copy">Copy</span>
    [...]
  </code>
</div>

Apply the following CSS styles:

.fix {
  position: relative;
}
.fix code {
  position: static;
}

Check out the solution in action here: https://jsfiddle.net/voxp8rgf/1/

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

Incorporating a calendar icon within an input field: Step-by-step instructions

Could anyone help me figure out how to insert a Font Awesome icon into the textbox within daterangepicker? Right now, all I see is this: https://i.sstatic.net/7LLmj.png However, I want it to look like this: https://i.sstatic.net/2UyjH.png Here's my ...

loading a CSS file from the 'assets' folder within a NUXT layout

While working in a Nuxt layout file (default.vue), I encountered an issue where I was able to successfully load an image from the assets folder, but the CSS file failed to load. Why is that? /layouts/default.vue <template> <img src="~assets/phot ...

Steps for bringing the image to the front and changing the background color to black

I am trying to create a function where a button calls the ID image. However, I want the background div image to be unclickable and for the image to appear in front of all other divs when the page is loading. What CSS style should I add to achieve this? ...

Toggle Div Visibility with Span Value Change

In my quiz, there is a span that displays the sum of checked checkboxes. Depending on the value in the span, I want to show or hide two different divs. Currently, my code hides the divs but does not show them. Please help! <div class="results center"&g ...

Is there a way to stop the top nav from covering the first element of the side-nav in specific situations?

I'm grappling with the issue of how to prevent the side-nav from obscuring the top element in the vanilla Bootstrap 4 example provided below. Any tips? (Problem resolved - check below for solution) This problem is occurring not only on my website bu ...

Using PHP and JQuery to customize background images

I am facing an issue with setting the background of a specific div using a PHP variable passed to a jQuery script. Despite my efforts, the code does not seem to work as intended. Below is the code snippet: <?php $post_thumbnail_id = get_post_thumbnail ...

"Upon the page loading, a flickering effect can be seen in the div that

I'm trying to avoid this issue. Whenever I use ng-repeat, it initially displays everything inside the div along with empty scopes for a brief moment before loading the data and showing it normally. I want to eliminate this flicker upon page load but c ...

HTML: Body with a larger height than its actual content dimensions

My Chrome browser extension seems to have a body that is much taller than its actual content: https://i.sstatic.net/t44t6.pnghttps://i.sstatic.net/8WjzD.png Even though there are no other parent div elements, the height of the <div id='app'& ...

Importing images in React for CSS does not function properly

I've encountered an issue while trying to import an image for CSS. I successfully imported the image and used it in the img tag as src={furnitureBG} for testing purposes. Following the documentation, I imported the image and set the path as the value ...

CSRF validation did not pass. The request has been cancelled. The failure occurred due to either a missing or incorrect CSRF token

Upon hitting the submit button in the login form, I encountered the following error message: Forbidden (403) CSRF verification failed. Request aborted. CSRF token missing or incorrect. settings.py MIDDLEWARE = [ 'django.middleware.security.Secur ...

Limiting the scrolling capability within a flex container by using the nowrap

When using flex with nowrap, it appears that the horizontal scroll bar only allows moving to the right while the items on the left remain hidden. To demonstrate this issue, I have created a sample on CodePen: http://codepen.io/anon/pen/QpgvoZ This behavio ...

Alter the orientation of the current CSS shadow

Looking to modify the direction of a CSS shadow without adjusting the color or strength? box-shadow:green 0 1px 3px; I attempted to change the shadow direction only with the following code: box-shadow:inherit 2px 0 inherit; Unfortunately, this approach ...

What is the best way to transfer variables between two Vue files?

How can I transfer a variable between two Vue files? Hello, in my SendCode.vue file, I have a variable named NewEmail that I would like to use in another file called changePass.vue. Is there any way to do this? Can someone offer assistance? Thank you</p ...

A step-by-step guide on displaying a loading spinner during the retrieval and assembly of a component framework (Astro Island) with Vue and AstroJS

Here is the astro code I'm working on: --- import BaseLayout from '../../layouts/BaseLayout.astro'; import ListadoProfesionales from "../../components/pages/ListadoProfesionales/ListadoProfesionales.vue"; --- <BaseLayout title= ...

Issue regarding the functionality of CSS styling when applied to a button

Trying to Style a Button with CSS div.myButton input a { display:block; height: 24px; width: 43px; padding:10px 10px 10px 7px; font: bold 13px sans-serif;; color:#333; background: url("hover.png") 0 0 no-repeat; text-decoration: none; } myButton a:hover { ...

Incorporate hover, onmouseover, and onmouseout features into a CSS class with proper syntax

I'm struggling with the fundamentals of syntax. I am attempting to utilize jQuery in order to target all elements within a certain CSS class, and then apply a function when the user hovers over the item. $(".item").hover(function(){$(this).fadeTo(100 ...

Unit Test: What is the proper way to activate a trigger event on an input that triggers a function in Vuex?

I am working with a bootstrap vue component: <b-form-input v-model="currentUser.name" placeholder="Name *" name="name" @input="checkSubmitStatus()" ></b-form-input> In the methods sec ...

The Cordova Network Information Plugin is experiencing some functionality issues

I successfully developed a Mobile application using Cordova, Onsen UI, and Vue.js. While addressing network connectivity issues, I incorporated the cordova plugin cordova plugin add cordova-plugin-network-information For determining the type of connectio ...

Controlling various divs with unique identifiers using Angular

Imagine having a vast number of HTML elements with unique IDs that require their styles to be changed repeatedly in a controller for spectrum visualization. What is the most efficient way to achieve this in Angular, without resorting to duplicative HTML co ...

Navigating between different views in a Vue application often involves passing data

I am currently using a <search-bar> component with dropdown options for filtering search results. When the submit button is pressed, the following code is executed: search() { let query = { status: this.selectedOrderStatus }; this.$rout ...