FluidWidth doesn't work when application starts in iframe

[Xambey]

FluidWidth doesn't work when application starts in iframe. When the speedometer is being drawn, the clientWidth and clientHeight of the parent component dont have time to get the dimensions set for it, as a result of the fact that in this state they are 0, the speedometer gets 0 width and height. I tried to force the speedometer to rerender in mounted(), but that didn't help. How can I get around this?

height and width of speedometer:

parent height and width:

My configuration after start:

i think the problem is here

How i use it:

<template>
    <VueSpeedometer
      ref="speedometer"
      class="cringometer"

      :value="value"
      :needleTransitionDuration="needleTransitionDuration"
      :endColor="endColor"
      :startColor="startColor"
      :textColor="textColor"
      :minValue="minValue"
      :maxValue="maxValue"
      :fluidWidth="fluidWidth"
      labelFontSize="28px"
      valueTextFontSize="28px"
    ></VueSpeedometer>
</template>

<script>
    import VueSpeedometer from "vue-speedometer"
    import i18n from '../i18n'

    export default {
        name: 'Cringometer',
        props: {
            value: { type: Number, default: 0 },
            minValue: { type: Number, default: 0 },
            maxValue: { type: Number, default: 1000 },
            startColor: { type: String, default: '#18d143' },
            endColor: { type: String, default: '#da0c2c' },
            needleTransitionDuration: { type: Number, default: 1000 },
            textColor: { type: String, default: '#666' },
            fluidWidth: { type: Boolean, default: true },
            width: { type: Number, default: window.innerWidth },
            height: { type: Number, default: window.innerHeight },
        },
        components: {
            VueSpeedometer
        },
        methods: {
          updateRender() {
              debugger
              this.$refs.speedometer.force_render = true;
              this.$refs.speedometer.updateReadings();
          }
        },
        mounted() {
            // this.updateRender();
        },
        updated() {
            this.updateRender();
        }
    };
</script>

<style scoped>
  .cringometer {
    height: 50% !important;
    width: 100% !important;
  }
</style>

I think this issue is due

[Xambey]

i found the hack but it is very dirty:

mounted() {
        setTimeout(() => {
                this.$nextTick(() => {
                this.updateRender();
            })
        });
}

[Arun Kumar]

This looks like a limitation of the iframe sandbox in which the code is run, not inherently an issue with the component itself.

Please refer palerdot/react-d3-speedometer#69 more info and a possible workaround of delaying render of component till you get the dimensions of the iframe.

Please reopen if you think there is a problem with the library itself.