Set width of a div based on another div in Vue JS

Question

I am trying to implement a dual scroll where there is a scroll one above and below the table.

The width of the table is based on user action of adding more columns so the width is always dynamic.

What I have done for the second scroll is shown below.

<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>

Here I want to set the size of div1 based on the content width so that both scroll starts at same time.

I tried using JS to get the width using this.$refs["content"] and then setting width of div1 but that doesn't seem to work .

Please help me with this.

I can't see any ref named `content` inside the html template shared by you. — RHN CHN, Mar 08 '23 at 17:31
It was a editing mistake but its there in actual code . I have added it now. — ajith sadanandan, Mar 08 '23 at 18:08

score 0 · Answer 1 · answered Mar 11 '23 at 20:08

Based on horizontal scrollbar on top and bottom of table

<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>

Live example CodeSandbox

Set width of a div based on another div in Vue JS

1 Answers1