Adjust the width of a div container in Vue JS by dynamically setting it based on the dimensions of

Question

Adjust the width of a div container in Vue JS by dynamically setting it based on the dimensions of

I am currently working on a project that requires a dual scroll feature, where there will be a scroll bar both above and below the table.

The table width will be determined by the user's action of adding more columns, making the width dynamic.

Below is the code snippet of what I have implemented for the second scroll bar.

<div class="wrapper1" v-on:scroll.passive="handleScroll1" ref="wrapper1">
        <div class="div1" style="width:${this.width} + 'px'"></div>
</div>
<div class="wrapper2" v-on:scroll.passive="handleScroll2" ref="wrapper2">
    <div class="content" ref="content" >Content</div>
</div>

My goal is to set the size of div1 based on the width of the content so that both scrolls start at the same time.

I have attempted to use JavaScript to get the width using this.$refs["content"] and then set the width of div1, but it does not seem to be working properly.

I would greatly appreciate any assistance in resolving this issue. Thank you.

javascript html css vue.js

Answer 1

Answer №1

After reading the article on implementing a horizontal scrollbar on top and bottom of table, I was inspired to create a similar setup in my project.

<template>
  <div id="app">
    <div class="wrapper1" ref="wrapper1" @scroll="onScrollWrapper1">
      <div class="div1"></div>
    </div>
    <div class="wrapper2" ref="wrapper2" @scroll="onScrollWrapper2">
      <div class="div2">
        aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb
        cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd
      </div>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue'

export default {
  name: "App",
  setup() {
    const wrapper1 = ref()
    const wrapper2 = ref()

    const  onScrollWrapper1 = () => {
      wrapper2.value.scrollLeft = wrapper1.value.scrollLeft
    }

    const  onScrollWrapper2 = () => {
      wrapper1.value.scrollLeft = wrapper2.value.scrollLeft
    }

    return {
      wrapper1,
      wrapper2,
      onScrollWrapper1,
      onScrollWrapper2,
    }
  }
};
</script>

<style>
.wrapper1,
.wrapper2 {
  width: 300px;
  border: none 0px RED;
  overflow-x: scroll;
  overflow-y: hidden;
}
.wrapper1 {
  height: 20px;
}
.wrapper2 {
  height: 200px;
}
.div1 {
  width: 1000px;
  height: 20px;
}
.div2 {
  width: 1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}
</style>

For a hands-on demonstration, visit this CodeSandbox link

Answer 2

After reading the article on implementing a horizontal scrollbar on top and bottom of table, I was inspired to create a similar setup in my project.

<template>
  <div id="app">
    <div class="wrapper1" ref="wrapper1" @scroll="onScrollWrapper1">
      <div class="div1"></div>
    </div>
    <div class="wrapper2" ref="wrapper2" @scroll="onScrollWrapper2">
      <div class="div2">
        aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb
        cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd
      </div>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue'

export default {
  name: "App",
  setup() {
    const wrapper1 = ref()
    const wrapper2 = ref()

    const  onScrollWrapper1 = () => {
      wrapper2.value.scrollLeft = wrapper1.value.scrollLeft
    }

    const  onScrollWrapper2 = () => {
      wrapper1.value.scrollLeft = wrapper2.value.scrollLeft
    }

    return {
      wrapper1,
      wrapper2,
      onScrollWrapper1,
      onScrollWrapper2,
    }
  }
};
</script>

<style>
.wrapper1,
.wrapper2 {
  width: 300px;
  border: none 0px RED;
  overflow-x: scroll;
  overflow-y: hidden;
}
.wrapper1 {
  height: 20px;
}
.wrapper2 {
  height: 200px;
}
.div1 {
  width: 1000px;
  height: 20px;
}
.div2 {
  width: 1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}
</style>

For a hands-on demonstration, visit this CodeSandbox link

Adjust the width of a div container in Vue JS by dynamically setting it based on the dimensions of

Answer №1

Similar questions

What is the most effective way to implement a single modal throughout my web application without having to duplicate HTML code on each page?

Tips for transferring information from a form to your email address

Using PHP to create custom HTML email templates and sending them out via

Mini-navigation bar scrolling

Customize CSS for Vimeo's HTML5 player

What are the recommended methods or examples for implementing a scheduling calendar using JavaScript?

Is there a way to shut down a browser tab without being asked, "Are you sure you want to close this window"?

Combining Django and chartjs to create stacked multiple charts

Turning JSON data into an array format, omitting the keys

Update the value of a JavaScript variable in an HTML template by targeting the element with a specific

Trouble arises when attempting to animate the movement of two distinct objects consecutively using jQuery

Implementing CSS to Style Images in JavaFX FXML

jsx syntax highlighting issue in sublime text

Accessing the req object in Node.js using Express

Is there a way to effectively communicate and pass state information between sibling components in React?

Sending an array from the front-end to the back-end in Laravel with JavaScript

What is the process for incorporating a custom attribute in Quasar?

Solved the issue of inconsistent element height and jumping on mobile devices during scrolling

Effective ways to retrieve API response data in React JS

What is the best approach in VueJS to implement a skeleton loader and an empty page condition for my orders page simultaneously?