Having trouble getting the overflow scrollbar to work properly?

I recently created a Whiteboard using Vue. The Whiteboard consists of an SVG element where I can add other SVG elements like paths to it. In order to enable scrolling within the SVG, I came across this example which seemed quite helpful.

Check out the example here

Below is the HTML code for my Whiteboard:

<svg width="1300px" height="500px" style="overflow-x:scroll; overflow-y:scroll;" viewBox="0 0 1300 500" class="flex-item" id="whiteboard" ref="whiteboard"/>

Additionally, here is the corresponding CSS style section for the Whiteboard:

#whiteboard {
  /*position: absolute;*/
  /*width: 100%;
  height: 100%;*/
  background: rgb(255, 255, 255);
  z-index: 1;
}

Despite my efforts, I am facing issues with making it work properly. It could possibly be due to Vue but I'm not entirely sure. Any assistance would be highly appreciated :)

Thank you in advance for your help!

htmlcssvue.jssvg

Answer №1

The SVG in the provided example does not actually have scrolling capabilities. Instead, the scrollbars visible are part of the surrounding div element. To achieve a similar effect, you need to enclose your SVG with maximum dimensions within a container that is sized to fit the screen:

<div style="width: 120px">
   <svg width="1400px" height="600px" style="overflow-x:scroll; overflow-y:scroll;" viewBox="0 0 1400 600" class="flex-item" id="canvas" ref="canvas"></svg>
</div>

Following these steps will result in the display of scrollbar functionality.

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

Locate the initial anchor tag using PHP

Is there a way to extract and display only the first anchor tag using PHP from the given HTML string? <ul class="side-navigation"> <li><a href="/?id=12">What is RtII?</a></li> <li><a href="/?id=13">RtII in NY</ ...

phphtml

Assign a class to the initial element of the Vuetify v-select module

Hey there! Currently, I'm utilizing the v-select component from Vuetify. I'm looking to customize the appearance of the first item in the v-select component by adding a specific class. For example, I want the text of the first entry "Item A" to b ...

javascriptvue.jsvuetify.js

The bootstrap modal is appearing correctly, but the content within it is not displaying properly

I've been working on a website and added a modal for signup. However, when the user clicks on the signup button, the modal appears but the content inside it is not clickable. Can someone please help me with this issue? Here is the code snippet I am us ...

javascriptcsstwitter-bootstrap

What is the best way to scale a div proportionally within a bootstrap grid?

Despite spending hours reading numerous online sources, I am still struggling to fully grasp the CSS/HTML box model. Specifically, I am attempting to create sections with a ratio of 3:2, where 3 represents the width and 2 represents the height. https://i.s ...

htmlcsstwitter-bootstrapsass

Arranging div elements in a vertical stack with CSS

Looking for help in arranging div elements in a way that they resemble an equalizer, similar to the one shown in this screenshot Equalizer. Can you provide advice on how to remove the dots from the list? I've already attempted using the CSS property ( ...

htmlcsslinear-gradients

How to Restrict the Number of Rows Displayed in an Angular 4 Table

Currently, I am faced with a situation where I have a lengthy list of entries that I need to loop through and add a row to a table for each entry. With about 2000 entries, the rendering process is slowing down considerably. Is there a way to limit the disp ...

htmlangulartypescript

How do I incorporate pagination into a PL-SQL dynamic content table in Oracle Apex?

I've successfully created a PL-SQL dynamic content report in Oracle Apex, but I'm struggling with implementing pagination. With too many rows to display at once, adding pagination will greatly enhance the user experience. Here is a snippet of my ...

javascripthtmlcssplsqloracle-apex

Vue.js App encounters Recaptcha contact form 7 with a status of "spam"

I recently developed a Vue.js application that operates on a subdomain within the same main domain as my WordPress site. To submit a form to the contact form 7 rest API, I utilized the axios package. However, every time I submit the form, I receive a respo ...

wordpressvue.jsrecaptchacontact-form-7

Combining Two DIVS Side by Side

Hey there, I am working on a timeline using two divs within a table cell. My goal is to have these divs overlap instead of appearing one below the other. The position attribute for all the DIVs inside the cell must remain unchanged due to the drag/drop fu ...

javascriptjqueryhtml

What strategies can be used to ensure that the page layout adjusts seamlessly to even the smallest shifts in window size?

Of course, I am familiar with media queries and how they allow us to set specific min-width and max-width ranges for CSS changes. However, when I look at the website styledotme.com, I notice that the block/div beneath the navigation bar gradually shrinks ...

javascriptcssresponsive-designmedia-queries

What are some solutions for adjusting this sidebar for mobile devices?

My mobile version sidebar is not functioning properly on my website. To see the issue, you can visit Zinexium. As I am new to HTML, I don't know how to fix it. Here is a link to the code. Thank you! <!DOCTYPE html> // Code snip ...

htmlcss

Utilizing a solo attribute within a Vue3 composable

I'm currently using a composable function to load images in my Vue3 project. While I've been able to successfully pass all the props as one object, you can check this question for reference, I'm facing an issue with passing a specific proper ...

vue.jsvuejs3vue-composition-apivue-script-setup

In Vue JS, what is the best way to access my data within a filter function written in Javascript?

One feature I added to our application is a validation check for each row to ensure there are no duplicate column values. While the validation works fine, I'm encountering an issue with deleting rows. For example: https://i.stack.imgur.com/NylYj.png ...

laravelvue.js

Strategies for avoiding a hover component from causing distortion to its parent component in React

I am encountering an issue with a hover component that is causing distortion in its parent component when displayed. Essentially, I need to prevent the hover component from affecting the layout of its container. Below is the code snippet: Styling for Lang ...

javascriptcssreactjscomponents

Exploring how to extract table data using XPath in PHP through continuous loops

Here is an example of the HTML code for a table: <tbody> <tr>..</tr> <tr> <td class="tbl_black_n_1">1</td> <td class="tbl_black_n_1" nowrap="" align="center">23/07/14 08:10</td> <td ...

phphtmlxpath

Error encountered in VUE JS 3: The function vue.initDirectivesForSSR is not recognized as a valid function

I've been encountering some errors while trying to build my Vue web app with this configuration. I have searched for a solution, but couldn't find anyone facing the same issue as me. Any suggestions on how to resolve this problem? The build was s ...

javascriptnode.jsvue.jswebpack

Retrieving information from the data table

Is there a way to automatically calculate the total cost of acquisition based on the values entered in total_no_of_units and cost_per_unit? For example, total_cost = units * cost per unit. I welcome any suggestions on how to achieve this. The total_cost_ ...

phphtmlmysql

What is the best way to utilize props and mounted() in NuxtJS together?

I'm a beginner with NuxtJS and I'm looking to implement window.addEventListener on a specific component within my page. However, I also need to ensure that the event is removed when the page changes. In React, I would typically approach this as ...

javascriptvue.jsnuxt.js

Reset Vuetify toggle button if API call is unsuccessful

Hello, I am currently working with Vue and Vuetify 2. Within my project, I have a simple component that utilizes Vuetify's v-btn-toggle: <template> <v-btn-toggle v-model="localProp"> <v-btn value="1">Value1& ...

vue.jsvuejs3vuetify.js

What is the best way to avoid duplicating child components in conditional rendering?

Scenario I have created a custom button component using Vue: <custom-button type="link">Save</custom-button> This is the template for my custom button component: // custom-button.vue <template> <a v-if="type === &apo ...

vue.js