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
Related
The v-navigation-drawer has a very nice expand-on-hover functionality; here the expanded layer is displayed atop of the content; i.e. the content is not resized. Now I would like to have the same behaviour on click; but if I just manipulate the mini-variant property then the content gets resized (the layer moves the start of the content).
Now I found out – by complete accident – that I (kind of) get the behaviour I want by setting the width property (of v-navigation-drawer) not to a number (like 224 or "224") but to a string containing the number plus a unit (like "224px").
To me this actually seems to be a bug. Is it? If so: is there a proper way to achieve the same result?
I am working on a Qt-UI with PyQt and found this nice snipped to create a custom collapsible box widget here: How to create collapsible box in PyQt
I have just replaced the internal QScrollArea by a QFrame.
It works perfectly, as long as the content of the layout that is added stays the same.
However, I allow the user to add or remove widgets from that layout dynamically during use. Here I need some help. I am adding a Grid Layout with, say, 3 widgets inside there (initial creation of the box with .setContentLayout) and once the user adds a 4th widget:
the layout is compressed and keeps its original size
all widgets inside are compressed to fit in the newly created one
overall size of the collapsible box is kept constant.
I have played with various options like updateGeometry() on the content_area and all surounding widgets. It seems I don't fully understand what this code does, I am not really familiar with these animations yet. My best guess is, that the animation somehow blocks the update of the height of the collapsible box, causing the layout to be compressed.
I would be really happy for a pointer where to look / what to adjust to get the size of the collapsible box reacting to the size of the containing layout.
Thanks!
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.
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.
I'm using jQuery Isotope and I'm wondering if there's a built-in (or at least "easy") way to have it dynamically resize elements via a user control, like a slider.
There's a fluid/responsive demo in the documentation, but it resizes elements based on the size of the browser window. I'm looking for something where the window/container would stay the same size, and the user could control the size of the elements by dragging a slider (like the thumbnail size slider in iPhoto).
Is this even possible? I haven't been able to find any examples of Isotope used in this way.
You should try this link: http://isotope.metafizzy.co/demos/relayout.html This sample shows you how an item resizes onclick, but you can transfer this code to make it work with a slider. But as far as I know this plugin uses predefined width and heights via css-classes for its animations, so you might add a lot of css-classes different sizes and it won't work stageless but I am insecure about this. You'll probably need to set the size of an element dynamically. For example you can use the following code to increase the size of an item 5px in width and height:
/* resizing and relayouting the list */
$container.on('click', '.item', function(){
$this = $(this);
$this.width( $this.width() + 5);
$this.height( $this.height() + 5);
//reorganizes the elements in the list
$container.isotope('reLayout');
});
$container is your wrapping element and ".item" is the class of an item. You should probably use a named function for this event handler to bind and call it with your scroller. Hope that helps.