JS get available space between text and element boundaries

Question

Is there a way to get available space between text and element boundaries?

The problem is next. I need to display an error message in input label (by design). If there is not enough space I need to show an Icon that can be hovered and display an error.

Is there a way to achieve this?

PD - https://stackoverflow.com/questions/11634770/get-position-offset-of-element-relative-to-a-parent-container — Ponpon32, Aug 05 '19 at 13:07
@ths how can one attempt when not having means for that? I'm asking exactly for these. — Sergey, Aug 05 '19 at 13:14
at least show us the `HTML` structure so we could reproduce your issue. — ThS, Aug 05 '19 at 13:15
@ths any input from here https://material.angular.io/components/input/examples — Sergey, Aug 05 '19 at 13:21
And since I use their component both for label and error message I can't rely on its container size, because it will grow with text — Sergey, Aug 05 '19 at 13:23

score 0 · Answer 1 · answered Aug 05 '19 at 13:42

0

So if this is your element:

<div style="width:500px;" id="d">Birth settlement</div>

Put the text inside a span and calculate parent length - child length.

document.getElementById('l').textContent = document.getElementById('d').offsetWidth - document.getElementById('s').offsetWidth;

<div style="width:500px;" id="d"><span id="s">Birth settlement</span></div>
<span id="l"></span>

answered Aug 05 '19 at 13:42

zomega

1,538
8
26

The problem here is that `Birth settlement` will contain an error and this will affect the result. That's why I asked about text and not element – Sergey Aug 05 '19 at 15:05
I don't understand. My snippet gives you the width of the text. – zomega Aug 11 '19 at 08:37
Your text is fixed sized meanwhile mine may already contain an error. Inside the same tag. – Sergey Aug 11 '19 at 12:09

JS get available space between text and element boundaries

1 Answers1