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%);
}
Related
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.
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.
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 ?
I have a canvas element that changes in height after some user interaction.
The canvas is contained in a div. When the canvas changes in height, it currently overflows the div vertically.
Can I add a (javascript or jquery) listener (or something like that) to the height of the canvas, that dynamically changes the div's height according to the canvas height? Or is there a css way to let the div automatically enlarge (like in a table row).
thanks
Have you tried adding this style to the div : height:auto;
As a workaround, I've put the canvas in a table. A bit ugly, but it works.
I have a XULRunner application that I want to have display 2d graphics in a HTML element. I would like to be able to repaint those graphics when the window resizes. The layout looks something like this:
<box flex="1" id="canvas-box">
<html:canvas id="canvas" flex="1">
</html:canvas>
</box>
First of all the "width" and "height" properties of the canvas element do not reflect its actual size on the screen. This causes the strokes to come out stretched strangely, since 1 unit in the x direction ends up being different than 1 unit in the y direction. Secondly, I can't get the onresize event to fire, regardless of whether I put it on the canvas or on the surrounding box.
The XUL tutorial does warn that there are layout weirdnesses that will occur when you use HTML elements inside your XUL app, but in this case I don't have a choice because I need 2d graphics. Any pointers?
EDIT For now I'm going to use SVG in the place of the canvas element. I'm in the preliminary stages of trying it out, but at least it doesn't seem to have the weird "stretching" problems that canvas was having.
Couldn't you just put an HTML frame/iframe in the XUL and put the canvas in there?
I thought onresize only worked on <window>, you could resize the canvas and repaint it from there.