Running method to fit text in div

Hello,

I’m new to Vue and Ionic so I’m learning as I go.

I want to fit some text into a certain DIV i have on my page. But I cannot seem to make it work.

I want with page load to run a certain function so it can check whether or not the text need to be fitted.

I have found the following function:

const input = document.querySelector('input');
const output = document.querySelector('.output');
const outputContainer = document.querySelector('.container');

function resize_to_fit() {
  let fontSize = window.getComputedStyle(output).fontSize;
  output.style.fontSize = (parseFloat(fontSize) - 1) + 'px';
  
  if(output.clientHeight >= outputContainer.clientHeight){
    resize_to_fit();
  }
}

function processInput() { 
  output.innerHTML =this.value;
  output.style.fontSize = '100px'; // Default font size
  resize_to_fit();
}

input.addEventListener('input', processInput);

Now I have incorporated this into my app the following way:

...
<ion-text class="outputContainer">
  <div class="output" style="word-break: break-all; word-wrap: break-word;">{{key}}</div>
</ion-text>
...

export default {
    components: {
        IonPage,
        IonContent,
        IonNavLink,
        IonIcon,
        IonText
        
    },
    created(){
      return this.$store.getters.getStorageKey;
    },
    setup() {
      return {
          cog
      };
    },

    mounted() {
      this.resize_to_fit(".output", ".outputContainer");
    },
    computed: {
      aandoening(){
        return this.$store.getters.key;
      }
    },
    methods:{
      resize_to_fit(divOutputClassName, divOutputContainerClassName) {

        const output = document.querySelector(divOutputClassName);
        const outputContainer = document.querySelector(divOutputContainerClassName);

        let fontSize = getComputedStyle(output).fontSize;
        output.style.fontSize = (parseFloat(fontSize) - 1) + 'px';
        
        if(output.clientHeight >= outputContainer.clientHeight){
          //this.resize_to_fit(".output", ".outputContainer");
        }
      }
    }
}

You see I have commented out that last line because I got an error in the Vue console:

Uncaught (in promise) RangeError: Maximum call stack size exceeded

When I remove that line it doesn’t work, nothing gets changed, font-size doesn’t get changed.

I am pretty new to this so I’m probably doing things wrong, but I cannot seem to figure it out. If someone could help me, that would be great. Thanks.

1 post - 1 participant

Read full topic