What is the proper method for implementing a scrollable effect to the <v-bottom-sheet> element within the Vuetify framework?

Within my Vue.js project, I am utilizing the v-bottom-sheet component from Vuetify framework (version 2.1.12). Upon reviewing my code, you can observe that the v-card is enclosed within the v-bottom-sheet. The issue arises with the scrollable parameter of the v-bottom-sheet as outlined in the documentation. Despite following the guidelines, the scrollable feature fails to function. Could you please assist me in identifying the mistake?

In an attempt to address this concern, I resorted to implementing a scrollable effect on the v-card-text using CSS. I defined the information-window-v-card-text CSS class for this specific purpose. While it does provide a scrollable result, the height of the element extends beyond the lower screen border, evident in the image below:

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

InformationWindow.vue:

<template>
  <v-bottom-sheet
    v-model="sheet"
    inset
    max-width="50%"
    hide-overlay
    no-click-animation
    scrollable
    persistent
    dark>
    <v-sheet
      class="information-window-v-sheet">
      <v-card
        v-if="sheet"
        class="information-window-v-card">
        <v-card-title>New York</v-card-title>
        <v-card-subtitle>11201</v-card-subtitle>
        <v-divider></v-divider>
        <v-card-text>
          // Content omitted for brevity 
        </v-card-text>
      </v-card>
    </v-sheet>
  </v-bottom-sheet>
</template>

<script>
export default {
  name: 'InformationWindow',
  data: () => ({
    sheet: true
  })
}
</script>

<style scoped>
  .information-window-v-sheet{
    height: 50vh !important;
    border-bottom-left-radius: unset !important;
    border-bottom-right-radius: unset !important;
    background-color: rgba(0,0,0,0.5) !important;
  }
  .information-window-v-card{
    height: 100% !important;
    background-color: unset !important;
  }
  .information-window-v-card-text{
    height: 100%;
    overflow-y: scroll;
  }
</style>

Answer №1

After much troubleshooting, I finally found the solution to my issue. It turned out that removing the <v-sheet> tag made a significant difference. Without this tag, the scrollable parameter of the v-bottom-sheet component started functioning as intended.

Answer №2

To achieve the same result, you have the option to utilize the height property within the v-card-text component nested inside the v-card.

<v-bottom-sheet
    v-model="sheet"
    inset
    max-width="50%"
    hide-overlay
    no-click-animation
    scrollable
    persistent
    dark>
    <v-card
      v-if="sheet"
      class="information-window-v-card">
      <v-card-title>New York</v-card-title>
      <v-card-subtitle>11201</v-card-subtitle>
      
      <v-divider />

      <v-card-text height="70%">
        <p>Lorem Ipsum is not simply random text. It has roots in a piece of Latin literature from 45 BC, making it over 2000 years old. Contrary to popular belief!</p>
        <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</p>
        <p>Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced here.</p>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
        <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
      </v-card-text>
    </v-card>
  </v-bottom-sheet>

This method proved successful for me.

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

css The issue of ul and ol elements not inheriting the padding property

https://codepen.io/unique-user123/pen/abcDeFG Why is it necessary to utilize the ul, ol, and li selectors in order to remove the default 40px left padding and 16px top and bottom margin? Can't we simply use the body selector to achieve this? <hea ...

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

I recently incorporated jquery Galleria into my website and I am currently facing an alignment issue with the div element gallery-container. Interestingly, it appears correctly aligned in Chrome but is shifted to the right in Firefox. You can view the webs ...

How come the dropdown menu consistently disrupts my CSS design?

Whenever I add a dropdown menu, my CSS layout gets all messed up. Can someone please explain why this happens and how to fix it? Below is the code snippet: <asp:Label ID="projnamelbl" runat="server" CssClass="editlabels" Text="Project Name"></as ...

When attempting to call Firebase Functions, ensure that Access-Control-Allow-Origin is set up correctly

Although it may seem straightforward, I am confused about how Firebase's functions are supposed to work. Is the main purpose of Firebase functions to enable me to execute functions on the server-side by making calls from client-side code? Whenever I t ...

Cypress - A Guide to Efficiently Waiting for the Outcome of a Javascript Function Import

I am interested in creating a Javascript library to act as a wrapper for 3rd party APIs. I have decided to write the API wrapper as a standalone file rather than using Cypress Custom functions, so that I can share the library with teams who are not using C ...

Customize Joomla content in a component by using CSS within a template that I personally designed

Is there a way to customize the text content of a component in Joomla by editing the body text? The CSS properties for #content are adjusting padding, margin, border, width, height, and background but not affecting font attributes... Inside index.php < ...

Dynamic content for tooltips in Angular

Currently, I am facing a challenge where I need to dynamically populate content in a tooltip by executing a function with a parameter. This parameter holds the crucial information required to update the tooltip content. The complexity arises from the fact ...

Upgrading from synchronous $.ajax() to AngularJS $http or vanilla JavaScript (XHR) for asynchronous calls

Presented below is a function that I am currently working with: function getDataAvailablity() { var isDataAvailable; $.ajax({ url: 'http://someurl/data.json', async: false, dataType: json }).success(function() ...

Arrange Drifting Components in a Fluid Layout Grid

I am in the process of creating a unique sticky note website where I want to arrange the notes in a grid format. As the window size decreases, the notes should automatically reorganize to fit the width and allow for vertical scrolling. My goal is to achiev ...

Position a grid item in the center

Can someone help me with centering my container's item? I am struggling to align the third item to the center using display: grid. Previously, I attempted to use flexbox but found it to be less effective for a responsive layout. .projetos { f ...

What is the best way to expand a scrollbar's width with CSS?

Can the width of a scrollbar on a <div> element within the <body> be increased? I mean the scrollbar specifically on the inner <div> element, not the default browser scrollbar since this page is in full screen mode and does not display t ...

Trouble with displaying an array of React elements in the render() function

While learning React by creating sample projects with Meteor, I've managed to grasp the basics but hit a wall. I'm utilizing a Twitter API to fetch the latest three tweets from the BOINGBOING Twitter page. The API is functional, and I can succes ...

transferring information from a nested input field in Vue to its parent component

I need to send the input data from a child component to the parent component's data property by using the $emit method. Directly binding the transmitted property to the child property using v-bind within the <input v-model="userinput" /&g ...

Implementing JSON parsing in an ESP32 application using AJAX script

Currently, I am engrossed in a project that involves utilizing ESP32. I'm obtaining data from various sensors and transmitting it to a webpage hosted on the same board. After doing some research online, I learned that it's considered "better" to ...

What is the proper way to retrieve the JSON data?

How can I retrieve data from another table to use in a detail view if the value returned by the getData method is null? <th data-field="id" data-detail-formatter="DetailFormatter">ID</th> <th data-field="prefix&quo ...

Troubleshooting incorrect elements collapsing or opening in Bootstrap

This Vue project includes a component with the following code: <template> <div class="card card-body text-center m-3" style="max-width: 500px;"> <h3 class="d-inline m-3">{{this.task.title}}</h3> ...

When utilizing a Slick carousel with three slides and setting autoPlay to true, the slider-nav behaves as if there are five slides

I am currently using the Slick carousel plugin and I want to feature a display of 3 photos. The issue is that when I set slidesToShow=2, everything works perfectly fine, but when I try to set slidesToShow=3, which equals the total number of slides, the bot ...

Using Mongoose to increment a sub-document key

I could really use some assistance with the following issue. I'm trying to increment the keys like 'eagle', 'bear', etc. by one in my data model: { "_id" : ObjectId("57e134097a578b11eruogf0a2cb"), "email" : "<a href="/cdn-cgi/l ...

Get a document from a NodeJS Server with the help of Express

How can I improve my file downloading functionality in Node.js? Currently, when I try to download a PDF file from the server, the content is displayed as data instead of initiating the download process. I would like it to function similar to how it's ...

The challenge of using CSS Flexbox to position the logo with a margin-top

While learning flexbox, I encountered a challenge. I aim to center align h1, p, and button elements, with the logo positioned at the top margin-top of 1em. Essentially, I want the h1, p, and button to be centered, while the logo is positioned at the top wi ...