onMouseLeave - gauge chart component size increases - javascript

I am facing an issue with the react-gauge-chart library in my react project.
I have implemented a popover component using material-ui and introduced the gauge chart component from the library inside the popover modal. On text hover gauge chart is been displayed correctly but during onmouseleave event, the popover component flicks(size of gauge chart increases) for a tiny bit second then closes the popover modal. This flicker is currently effecting our project UI.
When I test without the gaugechart there is no issue with the onmouseleave event. Could anyone please help me where am I going wrong here or a solution which I can use?
As I am new to CSS I am not able to understand where this issue is coming from.
Reproduced the issue here
https://codesandbox.io/s/react-over-issue-5ibv6
Thanks

The onmouseleave event is not the cause of this problem. If you change toggling popups to click you continue to get this behavior
This is a rendering issue. When the popup is closed, the content size is decreased and this causes this behavior

Related

Popover dynamic position isn't updating

I'm using UI-Bootstrap as part of my angular application.
I added some simple popover which loads an HTML template file.
The popover position set fine but once I try to resize the window the popover location is not getting updated. However, if I close the popover and open it again, the new position is calculated.
Any idea what can cause the popover not to calculate the new position or any suggestions how to solve this?
Simple code:
<div id="some-wrapper">
<div popover-is-open="isOpen"
uib-popover-template="history"
popover-placement="left">History
</div>
</div>
I've spent 2 days on looking for a solution but with no success.
The strange thing is that in some other angular applications which use the same UI-Bootstrap version, the position is getting update during window resize.
The popover component is built from the tooltip component. There is no support for repositioning the tooltip or popover on window resize or scroll.

Using DHTMLX Scheduler, prevent tooltips from disappearing when hovering out of the event to the tooltip

I have been using the excellent DHTMLX Scheduler for a few days to get on with it, and I found solutions and workarounds for almost every specific things I wanted to achieve.
However, in this particular case, I am using the extension that allows tooltip customisation when hovering on an event (see doc here) which is working fine.
My problem here is the tooltip disappears when hovering out of the event, which is not wrong. The thing is I want to add clickable content in the tooltip, but since it disappears this simple task is rendered impossible.
I've searched through the docs, various forums and even here, but I haven't found any help regarding that matter.
Long story short, how can I prevent tooltips from disappearing when hovering above the tooltip itself (if at all possible)?
Thank you anyway.
The tooltip dissapears (after some delay) when the mouse hovers on an empty space. I.e. if user could move a pointer from an event into the tooltip without pointing to the elements outside both tooltip and event - tooltip won't dissapear.
Try setting some configurations, so tooltip will appear closer to the pointer and user will be able to move cursor into it:
scheduler.tooltip.config.delta_x = 5;
scheduler.tooltip.config.delta_y = -5;

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.

Draggable element problems in Sencha Touch 2.2.1

I am having problems trying to drag a container (which is inside a navigationview) outside of the navigationview. Every time I try to do that, the container that is dragged disappears behind other components when it is dragged outside navigationview.
I have written a small fiddle that explains the problem that I'm facing:
https://fiddle.sencha.com/fiddle/d0
Is there a way I can make the container visible even outside the navigationview?
I've reproduced the code in your fiddle, copying and pasting it in a fresh Sencha Touch 2.2.1 app but I was not able to reproduce the issue. In my app, draggable components does not disappears behind the navigation view as in your fiddle.
The only difference between your fiddle and my working version is that I had to write the MyDroppable class in a separate js file and require it in the Main controller.
By the way, you can try to add
z-index: 1000;
to the style attribute of all the three draggable components.
sorry if this seems not to be a valid answer, but I've not yet the reputation score to post a comment

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