Summary

I would like a <div> to be square (height equal to width) when the size of the parent <div> changes due to a change of its content (which can span one or more lines).

Details

The element design is

My idea is to watch for the changes of the text ("some text here" above) and recalculate the width of the square (the one with "a" above) so that it is equal to the height of the parent container (the margins on the drawing above are for illustration and are normally equal to zero).

I was expecting the following code (JSFiddle version) to do the trick:

var vm = new Vue({
  el: "#root",
  data: {
    text: "this is  some text<br>and some more"
  },
  watch: {
    text: function() {
      document.getElementById("square").style.width = document.getElementById("container").offsetHeight
    }
  }
})

#container {
  display: flex;
  flex-direction: row;
}
div {
  border-style: solid;
  border-width: 1px;
}

<script src=".0.3/vue.js"></script>
<div id="root">
  <div id="container">
    <div id="square">
      a
    </div>
    <div v-html="text">
    </div>
  </div>
</div>

Summary

I would like a <div> to be square (height equal to width) when the size of the parent <div> changes due to a change of its content (which can span one or more lines).

Details

The element design is

My idea is to watch for the changes of the text ("some text here" above) and recalculate the width of the square (the one with "a" above) so that it is equal to the height of the parent container (the margins on the drawing above are for illustration and are normally equal to zero).

I was expecting the following code (JSFiddle version) to do the trick:

var vm = new Vue({
  el: "#root",
  data: {
    text: "this is  some text<br>and some more"
  },
  watch: {
    text: function() {
      document.getElementById("square").style.width = document.getElementById("container").offsetHeight
    }
  }
})

#container {
  display: flex;
  flex-direction: row;
}
div {
  border-style: solid;
  border-width: 1px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.0.3/vue.js"></script>
<div id="root">
  <div id="container">
    <div id="square">
      a
    </div>
    <div v-html="text">
    </div>
  </div>
</div>

but the width of the square is not updated.

Is there something fundamentally flawed with this approach?

I thought that this may be a matter of the new width not being ready yet in the watch so I tried to use Vue.nextTick() to defer the calculation but it did not solve the issue (forked JSFiddle):

var vm = new Vue({
  el: "#root",
  data: {
    text: "this is  some text<br>and some more"
  },
  watch: {
    text: function() {
      Vue.nextTick(function() {
        document.getElementById("square").style.width = document.getElementById("container").offsetHeight
      })
    }
  }
})

• javascript
• html
• css
• flexbox
• vue.js

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jan 9, 2017 at 9:12 WoJWoJ 30.2k5858 gold badges214214 silver badges406406 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You have to use:

document.getElementById("square").setAttribute("style","width:"+ document.getElementById("container").offsetHeight + 'px')

instead of:

document.getElementById("square").style.width = document.getElementById("container").offsetHeight

Then, in order to account for the chnage, Vue.nextTick() also needs to be used.

Finally, changes will be visible after a modification of text.

The modified JS code:

var vm = new Vue({
  el: "#root",
  data: {
    text: ""
  },
  watch: {
    text: function() {
      Vue.nextTick(function() {
        document.getElementById("square").setAttribute("style","width:"+ document.getElementById("container").offsetHeight + 'px')
      })
    }
}
})

setTimeout(function() {
  vm.text = "this is  some text<br>and some more"
}, 3000)

and its JSFiddle example.