I am running into a very confusing issue when measuring the width of a button using offsetWidth.
I am using Vue 3 and Quasar (q-btn). Visually, the button looks completely correct and the text I am trying to display on it is rendered on a single line. However, when I measure the width via offsetWidth, the value is incorrect for labels with spaces.
| label on button | offsetWidth |
|---|---|
| hello | 45px (correct) |
| hello world | 45px (incorrect, should be larger) |
| helloworld | 79px (correct) |
I have tried this with many different lengths of strings. The problem seems to be the space. When I inspect the Button via dev Tools the width of the Button is correct. It just doesnt transfer right into my code.
Here are some code snippets, to better understand this Problem:
//I have to use absolute here
All of my console logs display the same wrong widths I showed in the Table above.
Things I already checked:
- The label is rendered inside a single
- No visible text wrapping (button looks single-line)
- Tried forcing: white-space: nowrap;
Expected behaviour:
The measured width should reflect the actual visual width of the button, regardless of whether the label contains spaces.