We have some annoying rendering issue with Primefaces 2.2.1 & IE9. There seems to be some kind of "two step rendering" after certain ajax updates.
In the first step, the ajax-updated code is rendered without the proper css applied to it - this looks messy, like so:
In the second step, the proper css is applied and everything looks as expected, like so:
Not all ajax updates have this rendering issue, but we have a hard time sorting out what triggers this behaviour.
If you have any ideas or hints, please let me know, since this is really annoying & ugly.
Regards: jimmy
Related
Environment:
I'm writing a SPA with JSF2.2, Bootsfaces 0.9.1, Primefaces 6.0, JEE7 and Hibernate 5.2 in combination with MySQL 5.7 DB.
What I have:
My SPA has a navbar on the upper part and a specific menu based on the selection of the navbar on the left. On the right side and under the navbar I've my main "content page". Similar to this picture but with the difference that my menu is dynamic:
For updating the content page I'm using AJAX.
Everything around the navigation is working as I expected as long as my content page does not contain a b:carousel!
What I tried to do:
As I mentioned above my SPA and all navigation is working correctly unless I add a b:carousel to a content page.
Please consider following example:
I got 2 content pages. Page 1 contains a single label with some text. Page 2 contains a b:carousel with some images. Page 1 is the welcome page.
As soon as I navigate from page 1 to page 2 nothing happens. I need to completely refresh the whole page to see page 2 and even this is not working everytime.
My main question:
Is there any trick to update the content page with ajax if there's a b:carousel on it?
What am I doing wrong?
EDIT:
I created a sample project on github so you're able to see what I mean. I used Java 1.8, Tomcat 8.0.36 and Netbeans IDE, however the project is a Maven project an should work in eclipse, too.
Project: https://github.com/mweber96/stackoverflow39128418
SPA Approach I partly used: http://www.beyondjava.net/blog/single-page-applications-with-bootsfaces/
This question is related to my previous question: Use ui:repeat with b:carousel?
It's a combination of two bugs:
Your example at GitHub uses PrimeFaces, but it doesn't seem to use a PrimeFaces component. The effect is that PrimeFaces adds some fancy JavaScript to load the missing CSS files dynamically (which is great!), but it doesn't add the PrimeFaces core library, so Mojarra runs into an exception it silently hides. You can fix this by adding a (possibly hidden) PrimeFaces component to your page, by including the PrimeFaces core.js file directly (although I wouldn't recommend that) or - of course - by removing the PrimeFaces dependency if you really don't need it.
BootsFaces relies on the HTML attributes to initialize the carousel. To my surprise, this even works, at least partially. However, to start the sliding automatically, you still need to initialize the JavaScript widget manually. In your case, that's
$("#myCarousel").carousel();
BTW, I suggest you open a bug on our bug tracker to fix the latter point (https://github.com/TheCoder4eu/BootsFaces-OSP/issues). Thanks in advance!
I'm using MathJax with PageDown in a pretty straight forward way.
InitMathjax(converter);
var html = converter.makeHtml(text);
var $pageText = ...;
$pageText.html(html);
This works most of the time when I run the site locally, and almost never works when I run it in production. The result can also vary between each reload, so I think there is some kind of race condition based on how long it takes for various scripts to load and run.
I've tried doing Mathjax.Hub.Reprocess() and such, which don't seem to help. Doing MathJax.Hub.Queue(["Typeset", MathJax.Hub, $pageText.get(0)]); 100ms after the above code seems to have fixed the issue. But this feels like a patch, and the font looks off in production. (Looks like mathjax generated html ends up in a <span class="MathJax_Preview">, rather than <span class="MathJax">).
I want to understand the issue so I can actually fix it. Thanks!
When designing and previewing a report in BIDS everything looks fine, but once rendered in a web browser the text boxes resize. I've tried a few things to stop this including using rectangles as place holders. Does anyone know of a workaround for this?
Here are some screenshots. First design view:
Render view:
In my experience, SSRS is not a very good tool for precise rendering. I've had the issue describe in various forms before, and can only offer a few options:
Don't care. Design your report in a way that it doesn't matter how it's exactly rendered.
Focus on one renderer. Don't optimize for both the BIDS Preview and the HTML rendering, but only on the final one (probably HTML). Note that with HTML you do have to deal with cross-browswer issues.
Use tables for layout. I know, this is frowned upon in CSS land, and I personally don't like it either. But a matrix may be your best bet at approaching pixel-perfectness, and from your screenshot it even looks like you have tabular data so it's even possible to rationalize the choice.
Choose another renderer. Deliver your report in Excel instead of HTML. With Excel it should be easier to get to a nicely layouted table.
I have been working on this site for some time and just launched it for a client.
People have actually had trouble beleiving I had done it on WordPress, though I don't see why...
Anyway, I suddenly see that the form fields of one of the forms on the site (Newsletter Registration) disappear while on IE, you get to see them for a second and puff, they're gone. I did check this previously on IE and it worked, I especially used CSS3 PIE to get the rounded effect for the fields on IE...
Link to website: http://www.doritsivan.com (hope this isn't considered promotion, not my intention)
site is based on WordPress and jQuery.
resolved the issue, thank you all. it was a bad case of relative vs. absolute positioning and the fields decided to go away (literaly)
A bunch of debugging with firebug-lite (btw was real to get it to work on my IE, kept on crashing or refusing to load altogether combined with IE popup and security issues) and I understoid that this was the issue, then some pixel fiddling and all was good. rechecked in Chrome, saw that result was exactly the same. job done
I do some work on on old tables based site. It is being replaced but I would like it to work for now.
One of the pages in question is http://www.gdsofusa.com/marantec_garage_door_openers.html. When this page (and some others) is viewed in Safari 5.0 (7533.16) and probably others, the page content is off to the right.
I just need to fix this since about 15% of the traffic is Safari.
Please help!
I got it working by:
Removing "float:left" on your "tabs" div
Setting your "tabs" li's as "display:inline-block" instead of "display:inline"
HTH
The first thing to try is always validation
A common cause of this kind of problem is a mismatched end tag on an HTML element.
Try an HTML validator like http://validator.w3.org