scrollIntoView() is not working outside the debugger - javascript

I have one window with border layout. In center I am using panel on which loading grids based on the selection of tabs from west side. Now the problem is when I am loading grid then grids are one on top of another. And then I need to scroll down to check complete grid. I want to see grid in panel if suppose i sellect second tab, first grid should move up and second grid should come into view.
I have used many methods but not getting success.
One of the code where I am getting bit of success,
onSelectionBtnClick : function(btn){
grid = me.someGrid(headersNode);
me.gridContainer.setLoading(false);
grid.body.dom.scrollIntoView(); // This line is for view
}
Here grid is coming in view but only in debugger, once I come out from debugger It coming same as previous. Can any body suggest what I am doing wrong.

Related

Bokeh - how to create a hideable sidebar

I have a bokeh project that looks very similar to this https://demo.bokeh.org/movies
Now I would like to make it possible to hide/unhide the column on the left.
I know how to hide it following the solution from here https://discourse.bokeh.org/t/hiding-bokeh-elements/4335/2
The problem is now where to put a button which would show the column again.
I thought of the following:
When hiding the column make another button visible which will allow to unhide the column. This is easy but adding a new widget to the layout would defeat the purpose of hiding the column since either way I would have a big button visible on the screen affecting the position of the figure. Is there some way of adding a new button widget which does not affect the whole layout?
Adding a new tool to the figure which would call the unhide the column. I am not sure though if this can be done easily.

Slick Grid column not rendering properly

See snapshot attached very first time when grid is created it shows like this snapshot, once we change size of any column by dragging or we change displayed column by right click and check/uncheck column to display or hide then column will align properly and also shows data.
one more thing when grid is created and rendered at that time area where this grid render is hidden, i mean there are tab layout and in one of tab these grid is created and active tab is different, does it make any problem.?
The grid size is rendered based on the current element size where it is attached to. Thus, if the element is hidden it will not show the correct layout. I usually call {grid}.resizeCanvas() when i show the tab. Alternatively, you can show the element while creating the grid and hide it later on.

Border Layout TreePanel collapse issue

I am working with Sencha Architect 3.1 , and i am facing an issue with Tree Panel collapse.
There is a view port with Border layout .
In the west region there is one Tree Panel and Panel with same width.
I have an event listener for click of leaf node in a Tree Panel in which i will give this.collapse(),
but when the Tree Panel is expanded next time it moves towards the right.
Here is a sample fiddle which i have done which has the same problem.
Please help me to find solution for this problem.
The big problem here is that you are attempting to collapse the TreePanel.
Let's take this in steps as to better understand the issue. There are 2 different options for the user to see the Tree Panel in your example.
The first would be to click the expand button tool within the header on the left side. But in this case the expand/collapse button tool has been hidden. Thus this way is not possible.
The second is to click anywhere(else) within the header along the left side.
The above methods for the user result in very different behaviors. If the first option were used, the panel would "expand", resulting in the other panels being pushed to the right so that the Tree Panel could be shown. If the second option were used, the panel would "float" over the existing panels.
I suggest you set hideCollapseTool: true and give the these two options a try to see for yourself.
With with knowledge, it should be easy to understand that performing this.collapse() is the incorrect way to "hide" the Tree Panel, because the panel was never expanded. Because it was not expanded, attempting to collapse the panel results in the x location of the Tree Panel to get offset incorrectly (Sencha should have error checking here, but obviously not).
So, the answer to question is to simply change this.collapse() to this.hide(). Unfortunately, there is no good way to tell the panel to unfloat itself and animate away. Either I don't know which method to call or Sencha has overlooked this issue.
I hope this was clear.

Panels disappearing after 1~2 secs using dojo framework

I am using dojo to render the panels on UI. I am facing one issue. All the panels get rendered on UI for few seconds(around 1~2 secs). After that I am getting a blank white screen. Now if I want to see the panels I've to do dragging the splitter OR maximize/restore that pane. I.e. basically I need to play with the width so as to get back the disappeared panels.Please suggest some solutions over this.
It would be better if you can provide more information in your question, your code is better. Otherwise, it is hard to tell what exactly cause this issue.
But you can try add resize call of the container of your panels somewhere after you startup this container.

jQuery Accordion Shrinks Google Charts if not in First Tab

I have a few different Google Charts that i want to put inside the sections of a jQuery accordion. The problem is that all the charts that are not inside the first part of the accordion are smaller for some reason. Something about the accordion is shrinking these charts. I do not want them to shrink. Does anyone know what I can do to keep them from shrinking?
See this example which illustrates the problem: http://jsfiddle.net/dN3LL/
Thanks!
EDIT
So from the answer provided by brandwaffle, I considered that the graphics should render before the divs are collapsed into accordion form, so I simply put the $('#accordion').accordion(); line right after the graphs are finished rendering, and it works! See the fiddle: http://jsfiddle.net/dN3LL/4/
I've had this happen to me with various different pieces of content in the past. I think the problem happens because the content is rendered in a collapsed container, so it defaults to the smallest possible size (I've seen this with content in flexible-width divs inside of the accordion as well). The best solution I can offer for an across-the-board resolution is to hook whatever google chart generation (or other content display) to the accordionchange event that jQueryUI's Accordion offers: http://jqueryui.com/demos/accordion/
If you use the accordionchange event, the Google Chart will render itself after the accordion has switched to the correct section, which should eliminate any problems you're having as a result of the chart trying to render into a squished (i.e. unopened) container. There may be a better CSS fix for this, but I haven't found one yet.
one workaround is, load chart first and then run accordion code once chart load complete or run accordion code after 1-2 sec (setTimeout)

Categories