How can I position the div to my symbol

[jemz]

Hi can I ask for some help please I want the name to be positioned next to the symbol @ , I have this js code but when I type

@John

, the name is too far from the symbol here is my code pen

Thank you in advance.

[jemz]

when type @ the name selection is far from the symbol

[PaulOB]

Is this close to what you want ?

[jemz]

Thank you so much for this Paul, Yeah this is good, but is it possible to position to next of the symbol @?
something like this

[PaulOB]

It’s not possible with css alone as you’d most likely have to place it at the current cursor position as there is no css logic for matching the text in an input.

You’d also have to consider what happens when the symbol is at the right of the input and then on small screens you won’t see the drop down as it will be off screen.

I think any other solution is going to be quite complex.

[PaulOB]

Maybe one of the js gurus here can help but this is beyond my skills.

I’ve put up a rough example that moves the box but i can’t work out a reliable way to find the cursor position from the edge of the textarea.

(for small screens I’ve just aligned it left so you will need to view on codepen itself)

I’ve just used a rough ch value but what you’d nee to do is somehow find the exact x co ordinate of that cursor position within the input and then use that value instead.

Maybe someone else here has a better idea?

[jemz]

Hi Paul, thank you so much I like this too.

[PaulOB]

One last go.
This one seems to be better:

[jemz]

Thank you so much for this