I'm using FusionCharts in my webpage. i'm rendering the same portlet with fusioncharts twice in the page. Sometimes i'm getting a big Exclamation Mark (!) in a grey circle in the place of charts.
And it happens only sometimes, so i'm not sure how to replicate this scenario or why this happens.
Has anyone faced similar issue?
Note: the div id for the fusioncharts is different in the page. So same div id is not whats causing this.
If anyone can give me any solution, it will be great.
Screenshot:
Unfortunately, i cannot share the code base in the forum. I'm sure there is nothing wrong in the code because the chart renders almost always. This happens very rarely but still is a problem.
Without a code or sample that can reproduce this, my answer would be based on checking the best practices
Ensure you do not have duplicate chart id
Ensure you either re-render existing chart or update data - at least ensure to dispose unneeded charts if you are re-rendering
Ensure that the div where chart is being rendered is "visible" during the rendered process.
If you have many interactive activities with the charts - like tab change, etc... ensure you sync them with chart events such as rendered, disposed, etc (this will avoid issues with errors in partial rendering of charts)
Check your JS console for errors when this (!) things happen.
I am curious though ... something is rendering the (!) ... if you are rendering Flash based charts, it maybe due to Flash plugin crashing. Try forcing JS rendering of charts.
Related
Buttons under the NoResultsOverlay or NoRowsOverlay component are not clickable due to absolute positioning and no z-index.
Also if the data grid is set to autoHeight, the overlay components are cut-off.
Code Sandbox link below to reproduce the issue.
https://codesandbox.io/s/customemptyoverlaygrid-demo-mui-x-forked-6hu6f6?file=/demo.js
The custom component gets wrapped by an absolutely positioned DIV with no z-index. Adding that fixes the issue.
But how to add it through componentProps or css is the question.
Please help.
Seems fixing this issue is a work in progress. Here is pull request resuming the different issues about overlays
When I use Hflex property in a included page in a MVVM approach, it doesn't work.
The problem happens when I include some page inside another, and this page has components whose sizes are controlled by hflex property. I already tried to force the rendering of the components using invalidate on parent window load, or Clients.resize(component) when it is created inside the viewmodel class, but with no success. It just happens in this case: pages included in a MVVM scenario.
Here is a way to see the error: http://zkfiddle.org/sample/3bj6e5j/9-Hflex-not-working-with-include-pages-inside-div#source-1.To see the problem, click in the "Open" label, then a combobox is shown. You can see that the size of the combobox is only updated after resizing the browser window or after clicking in the dropdown button
If I explicitly resize the browser window, then the components are correctly sized.
Could anyone give any idea on how to solve it?
It's actually the javascript who does the fault,
Let me explain more. First you set the src of the include correct.
This is before the javascript is called, and your div don't really have a width at that moment.
So it takes that size, what you see.
Then the javascript is called and and actually he show's the div, but with the rendered with of the include at that moment.
How can you fix it : use zUtl.fireSized.
Here is your working fiddle.
EDIT 2: An even better solution, for me, was to just use offsetWidth and offsetHeight as that will return the width without the transformation applied. But getBoundingClientRect() was used for a reason, as there is a comment next to that part mentioning a bug with Gecko and resizing tables with captions. The application I am working on is quite cutting edge, and is only required to work on Google Chrome as it is an internal application, so this fix is better for me, but still not ideal.
EDIT 1: I have found a way to fix this, but it required changing the TinyMCE source code, since the application I'm working on keeps track of the scaling applied to the contenteditable area, I was able to just insert my scaling multiplier as a divisor and apply it to the targetWidth and targetHeight variables in the function showResizeRect() on lines 14,197 and 14,198 of the unminified tinymce.js file (as of v4.2.6).
This is not an ideal fix, so I preferably like to do this a better way, so if anybody knows of a better way that does not including changing the TinyMCE source, then please enlighten me.
You can see the bug report I filed here.
I'm having an issue with TinyMCE, I am working on a web application, and we are using an inline TinyMCE instance to edit content that is inside a scaled contenteditable container. However, when going to resize an image, the resize handles are smaller than the image. Here is a demonstrative image:
I have searched on Google, but did not find anything relevant. Is there a plugin, or perhaps a workaround that deals with this already?
Thanks in advance.
I've done the prerequisite searching of stackoverflow and looking on the internet. I suspect that the answer is ' This can't be done. ' but I'm hoping someone here might have a solution.
My page loads fine, but many of my YUI components don't fully load before being displayed. For example, my DataTable will resize itself when displaying or my buttons will appear in their native form and then get YUI-fied.
Is there a way to delay the displaying of the page until all the Javascript is finished (i.e. all my YUI components are finished rendering)? I don't know how this would happen, as a lot of the JS depends on the DOM being present to manipulate it.
Is there a way to delay the displaying
of the page
If I understand correctly you would like to hide it until it's done?
If that's the case I have an idea:
add a wrapper around the element you
want to hide (or use
position:absolute to cover it)
give that div a background which use
the color of the surrounding with a
positive z-index
when all your javascript has loaded remove the
z-index or change the color of the background to transparent
Your javascript code would look like this:
do 1. and 2.
load your js
do 3.
Of course it needs to be synchrone.
As an alternative you could use visibility:hidden / visible on the element itself but I dunno for sure if it's well supported.
Try putting your Javascript in the head section of the page, as if it's near the end of the page, it'll load later (making the first elements load faster). OR, better yet, serve up your Javascript compressed and via a CDN, such as Amazon CloudFront so that it loads quickly.
I've yet another question. I'm working with GWT 2.0.4 and IE8 as well as FireFox (the latter only for comparison purpose). My application needs to load data and show it inside a table. There are about 60 columns and 150 rows to show.
Since the loading is dynamic - as soon as a dataset has been fetched, it's added to the table - I'm fine with slowdowns during loading process. However: when the table is completely loaded, I'd expect it to be pretty snappy and let me scroll it without much lag.
While the loaded table reacts in FireFox pretty good - it stays very responsive - Internet Explorer 8 is causing me a lot of headaches. In particular: as soon as the table finished loading and I try to scroll around or highlight a row, IE8 becomes VERY laggy and highlighting a row makes IE8 consume 50+% of CPU power.
I am not using any 3rd-party libraries and even displaying empty cells in a FlexTable still gives me the same issue.
I found some probably related issue here: SmartGWT ListGrid is slow, but only in Internet Explorer . Unfortunately neither the issue there, nor the supplied links for SmartGWT solved my problem as I am not using SmartGWT. I do believe though that the problem is related.
I'd be happy to try any suggestions.
If it's possible (and your description of the problem suggests so), use Grid instead:
A rectangular grid that can contain
text, html, or a child Widget within
its cells. It must be resized
explicitly to the desired number of
rows and columns.
Have a look at bulk table renderers # GWT Incubator for a comparison of these approaches (it's a little dated, but the point that FlexTable is slower than Grid still holds ;)). The "bulk rendered" tables from the incubator are also an option, however keep in mind that those widgets might not be maintained any more (and for example, contain bugs) - or are rapidly maintained :D But looking at the source might at least point you in the right direction, if you wanted to roll out your own solution to this problem.
highlighting a row makes IE8 consume 50+% of CPU power.
Maybe it's because you added mouse listeners to every row in your table. If so you could use :hover-pseudo-class in your css-files.
This article maybe helpful if you need to handle Events from a bunch of widgets in your table: http://code.google.com/intl/en/webtoolkit/doc/latest/FAQ_UI.html#As_the_application_grows,_event_handlers_seem_to_fire_more_slowl