I have a paper-dialog-scrollable which is filled with a dom-repeat from a firebase-query. Everything works fine, except paper-dialog-scrollable doesn't scroll to the bottom when firebase adds an entry to the array.
I managed to set a callback whenever the array gets a new entry (basically with an observer on the spliced array, not on the array).
So how do I instruct paper-dialog-scrollable to scroll to bottom from that callback ?
I saw solutions here which don't seem to work.
Thanks for any insight.
As suggested in the link you provided, give the paper-dialog-scrollable some id (e.g pds) and then add the following code:
this.$.pds.$.scrollable.scrollTop = this.$.pds.$.scrollable.scrollHeight;
An element's scrollTop value is a measurement of the distance from the
element's top to its topmost visible content. When an element's
content does not generate a vertical scrollbar, then its scrollTop
value is 0. Learn more about scrollTop.
The element's scrollHeight read-only property is a measurement of
the height of an element's content, including content not visible on
the screen due to overflow. Learn more about scrollHeight.
I have made a demo here: https://plnkr.co/edit/JIZEdd6NoBBnwndbQuFA?p=preview.
Related
I have a ListView inside of a TornadoFX form builder field that can be added to and removed from by some buttons off to the side. However whenever the contents of the list is modified from the buttons, the list moves vertically downwards. The height of the ListView remains the same, but it's almost as if there is padding being generated along the top whenever the content length is modified. The height change is then reset as soon as there is some change in focus, either by clicking on another component in the view, or by unfocussing and refocussing the window.
I've tried to limit the ability for this to happen by enforcing a max height, both on the form field and on the ListView itself, but neither worked.
Using listeners to print out all the values I could think of that would result in this change, I found that the "bounds in Parent" were changing, adding a value of 17 to both the minY and maxY values. I've not been able to determine where this value of 17 comes from.
The current code for the view is here: https://pastebin.com/6qFVvxvP
I also have some images to help visualize what the problem is:
Before removing content:
After removing content:
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 am using Cytoscape Dagre extension to show hierarchical graph from left to right. It has 14 children and one parent 1 and main parent. I am calculating the height of the container using the number of nodes. Then I am calling fit function after the layout is created but it is not working.
I have added a fit button and if I click on it after the graph is loaded, it works then. What am I doing wrong? I would like fit function to be called after the graph is initialzed.
Here is the stackblitz link: https://stackblitz.com/edit/dagre-childrenconnected-fit?file=src%2Fapp%2Fapp.component.ts
You can try clicking on Fit and see the graph is fitted properly if you click on fit button but it does not work if you refresh the page.
Your code is not working correctly, there are some errors.
(1) Firstly, your "dynamic height" [ngStyle]="{'height': heightTest + 'px'}" is undefined at graph init and runs into a weird error after that. Just use something like [ngStyle]="{'height': '100vh'}" and go from there.
(2) As the docs say:
If your code resizes the graph’s dimensions or position (i.e. by changing the style of the HTML DOM element that holds the graph, or by changing the DOM element’s position in the DOM tree), you will want to call cy.resize() to have the graph resize and redraw itself.
Your approach is not really ideal, I'd suggest just changing the height of your container and then resizing/fitting your graph:
let container = document.getElementById("cy");
// just some random height depending on the number of nodes
container.style.height = `${this.cy.nodes().length * 40}px`;
this.cy.resize();
this.cy.fit();
Here is the edited StackBlitz: link
I have the following project: https://codesandbox.io/s/vue-template-c1rj1
I expect the image to just come up from the bottom of the screen already being in the middle of the page, but it first comes up from the bottom and then moves to the center of the page. I noticed that setting the width of the notification-box class to 100% fixes it but I am not exactly sure why.
The reason this is not working is because the fixed css property positions an element relative to the parent layer. Usually this is the viewport.
However, the transition property creates a new layer for the the Element it is used on. In your case, Vue applies the transition property during the animation - making the notification-box the next parent-layer (with a width of 0).
Positioning your Image 50% (of 0) left, does not do anything.
Once the animation is over, the transition property disappears, making the viewport once again the next parent layer. Now 50% left (of the viewport) gives you the desired result.
How can I create horizontal layout with fullscreen scrollbar? Like "Store" app in Windows 8. I use WinJS
Try this, flexbox:
http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx
There is a property called ‘flex-direction’which allows you to change a row to a column, i.e. the elements would be aligned vertically. It is also possible to reverse the direction, i.e. the last element in the container would appear first in the list. This property can take the values – ‘row’, ‘row-reverse’, ‘column’ and ‘column-reverse’.