Vue - making one element's width match another element's width

Question

Vue - making one element's width match another element's width

Trying to dynamically adjust the innermost element's width to match the outermost element's width with Vue:

<div id="banner-container" class="row">
    <div class="col-xs-12">
        <div class="card mb-2">
            <div class="banner banner-tag card-body" :style="getBannerStyle"></div>
        </div>
    </div>
</div>

Here is the relevant Javascript code and Vue computed property logic:

var container = document.getElementById('banner-container').offsetWidth;
...
computed: {
    getBannerStyle () {
        return 'width: ' + container + 'px;';
    }
}

javascript html css vue.js

Answer 1

Answer №1

getBannerStyle will not be reactive if it does not access any other reactive properties. To make it reactive, you should assign the offsetWidth value to a data property and reference that within getBannerStyle. You can achieve this by adding the following code:

mounted () {
  this.offsetWidth = document.getElementById('banner-container').offsetWidth
},
data () {
  return {
    offsetWidth: 0,
  }
},
computed: {
    getBannerStyle () {
        return `width: ${this.offsetWidth}px;`
    }
}

Answer 2

getBannerStyle will not be reactive if it does not access any other reactive properties. To make it reactive, you should assign the offsetWidth value to a data property and reference that within getBannerStyle. You can achieve this by adding the following code:

mounted () {
  this.offsetWidth = document.getElementById('banner-container').offsetWidth
},
data () {
  return {
    offsetWidth: 0,
  }
},
computed: {
    getBannerStyle () {
        return `width: ${this.offsetWidth}px;`
    }
}

Answer 3

Answer №2

Regrettably, achieving this in pure Vue can be extremely challenging because the element might not have a size during any of the lifecycle hooks, particularly if it's not immediately visible on page load. Thankfully, all modern browsers come equipped with a handy class that can assist: ResizeObserver.

data: () => ({
    offsetWidth: 0,
    resizeObserver: null
}),
mounted() {
    this.resizeObserver = new ResizeObserver(this.onResize)
    this.resizeObserver.observe(document.getElementById('banner-container'))
    this.onResize()
},
beforeUnmount() {
    this.resizeObserver.unobserve(document.getElementById('banner-container'))
},
methods() {
    onResize() {
      this.offsetWidth = document.getElementById('banner-container').offsetWidth
    }
}

Answer 4

Regrettably, achieving this in pure Vue can be extremely challenging because the element might not have a size during any of the lifecycle hooks, particularly if it's not immediately visible on page load. Thankfully, all modern browsers come equipped with a handy class that can assist: ResizeObserver.

data: () => ({
    offsetWidth: 0,
    resizeObserver: null
}),
mounted() {
    this.resizeObserver = new ResizeObserver(this.onResize)
    this.resizeObserver.observe(document.getElementById('banner-container'))
    this.onResize()
},
beforeUnmount() {
    this.resizeObserver.unobserve(document.getElementById('banner-container'))
},
methods() {
    onResize() {
      this.offsetWidth = document.getElementById('banner-container').offsetWidth
    }
}

Vue - making one element's width match another element's width

Answer №1

Answer №2

Similar questions

Is there a way for me to modify this carousel so that it only stops when a user hovers over one of the boxes?

Looking to create a dynamic Angular reactive form using API response data? Seeking guidance on how to achieve this? Let's

JavaScript text converter using split() method

By-passing Mistakes in Iteration in JavaScript

Experience a glint in the React Suspense with React Router - Struggling with CSS properties post utilizing Suspense and Lazy

Encountering a peculiar problem with the Bootstrap Carousel where the first slide fails to load

Show the current time of a track using VueJS

Dynamically taking input in Vue JS while using v-for loop

How can I achieve a similar functionality to array_unique() using jQuery?

Using Vue.Js to link a value to a checkbox within a component

Error rendering {message} object on the Chrome Console

Is there a way to minimize superfluous re-renders in React without resorting to the useMemo hook?

Receive axios responses in the exact order as the requests for efficient search functionality

Utilize HTML5, CSS, and Responsive Web Design to place four boxes into a div container

User-triggered event not being emitted back from SocketIO server

"Utilize Bootstrap's responsive 3-column grid layout for a sleek design, complete with hidden col-12 elements below each grid

Leveraging jQuery to extract the value from a concealed form field

WordPress Migration Causing Issues with Custom Font Display

What is the best way to conceal the initial column using jquery?

Identify alterations in an input field after selecting a value from a dropdown menu