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

Include a photo in the notification when utilizing the sendToTopic function

Trouble arises from duplicating custom SCSS code while making modifications to SaaS variables in vue.config.js

Is it advisable to disregard mutation handlers in Vuex and consistently modify the store data directly?

Guide to creating a v-autocomplete that displays items starting with the search term first, followed by items containing the search term

Exploring the getJSON function within jQuery

Show a pop-up form when a user focuses on it using React

Unlocking the Power of Vue 3 Composition API for Section Rebuilding

The content of the string within the .ts file sourced from an external JSON document

I am interested in utilizing angular 4 ng2-ui/map with places-auto-complete functionality that is restricted to a specific country

Unusually Elevated Frame Rates within Three.js

Encountering a Next.js application error while utilizing the button tag in conjunction with generating metadata

Bringing a React Context Back to its Original State

Avoid nesting ternary expressions when possible - consider alternative solutions

The method for organizing boxes on the stack exchange website's list page

Is there a better approach to verifying an error code in a `Response` body without relying on `clone()` in a Cloudflare proxy worker?

Different scenarios call for different techniques when it comes to matching text between special characters

What is the best way to focus on an object using a particular variable in javascript?

Leveraging react-markdown alongside Material-UI's table component

Displaying AJAX data in a table format, showcasing 10 rows of information

Using a third-party Vue component within a .NET Core Razor Page, such as Vue Cal, can be easily achieved by following these steps