I am looking for a way to get the caret x y coordinates inside a contenteditable div, in a similar manner to how you can get the mouse coordinates using window.event since I need to open a pop-up exactly where the user is with the caret inside the contenteditable div. How can I do this? Many thanks!
Here's one approach:
Coordinates of selected text in browser page
However, in some circumstances this will not give you coordinates, in which case you'd need to fall back to inserting an element at the caret, getting its position and removing the element again.
Related
What is the most reliable way to get the absolute position on screen of any element?
I have the problem that when an element above (parent) is added with my methods I can not get the absolute position of an element.
Context: I need to get the absolute position on screen of an element to check if my element which follows the finger (animation made with reanimated) intersects with that element which I can not get the absolute position from.
Methods I have tried:
event.target.measure
Here is the problem that I have a swipe element over the "drop box" and it just produces false positions.
ref.current.measure
This one works but not reliable. It fires about ten times in useEffect and produces only once the correct position.
Are there other things I can try which are reliable?
I do not understand why it is so hard to get the absolute position on screen not relative to the parent.
I am not sure how your code is connected, and not sure if you want to make this feature in hacky way but you can get the absolute position of the element from on layout property https://reactnative.dev/docs/view#onlayout
I'm using a v-slider in a Vuetify context. The component has a message area that takes some space below the slider and makes it impossible to align the actual slider (the "line") in the vertical center to line up with other neighbouring components.
There seems to be a number of way to customize the message, but how do I get rid of that area completely? There will never be any messages to display there.
I've now resorted to adding a padding on top of the slider, align the components and then add a negative top padding on the group. But that seems just like a hack that I'd like to avoid.
Add the prop "hide-details" to the slider
<v-slider v-model="volume" label="Volume" hide-details></v-slider>
You can find all the possible props in the API-Section for the sliders.
When clicked on a button, I want to position the Vue material dialog under the button.The button is inside nested iframes. So, the x,y coordinates of button does not match the viewport coordinate.
Is there a way to position a Vue md-dialog relative to an element. I cannot use x and y coordinates using css as there are too many iframes and calculation of the exact x,y coordinate is difficult, even with element.getBoundingClientRect().
The issue was that md-dialog css places the dialog box in the center of the screen using css translate. Once it was overridden, it was easy to solve the issue.
.md-dialog{
-webkit-transform: translate(0%,0%);
transform: translate(0%,0%);
}
I have a problem using the Magnific Popup on my site here: http://www.cphrecmedia.dk/musikdk/stage/
Try to click on the usericons on the top right corner. Somehow the X is positioned to the right and not just above the popup. I've yet to find the solution that fixes this. Anyone who knows what I'm doing wrong?
The div with id="loginbox" should be relatively positioned:
position: relative;
The X button is an absolute position element and it is positioned relative to its first parent element (loginbox) that must have a position other than static.
There are two ways of opening a ToolTipDialog. One is by giving 'around' attribute which is a DOM node and other is by giving x and y coordinates. If we give 'around' attribute, we can also give 'orient' attribute to define the positioning of ToolTipDialog with respect to the DOM Node.
However, I have to open ToolTipDialog adjacent a certain gfx shape. Since this shape is not a Dom node I have to use x, y coordinate to position the ToolTipDialog. But in this case, I always get a default orientation (the pointer/notch) always points upwards.
Is there a way I can change the orientation by giving x, y coordinate such that I can ensure that ToolTipDialog now opens with the notch on its left side or on bottom side ? Also can I modify the point where this notch will be created ? It could be possible that ToolTipDialog is opened a bit shifted upwords and I may need the notch at the center of one of its side.
Finally, am I right in using the ToolTipDialog for my purpose, or should I use some alternative ?