as I found out a few days ago when you click an extension button and popup shows up, its height is much higher than it needs to be if you need the height to be less than 350px. When something happens in the popup (animation e.g.) the height is adjusted properly according to the content. Setting height to html, body and general wrapper element didn't help. It might be some bug in the latest update of Chrome, I cannot test it in earlier builds, because of autoupdate.
I'll be thankful for any thoughts and advices.
Libor
UPDATE: I started to examine what can possibly cause this behaviour and found out this happens because of Twitter and Google Plus share buttons. They both modify DOM structure adding script tag which adds iframe. When commented, popup bubble appeared in correct size. The weird thing is facebook like button script does more or less the same, but it doesn't mess up the layout at all.
Like it was said here, the good solution to solve this problem is changing <html> to <!doctype html>
Same thing here with my extension and Chrome 19 on Windows 7. I must note that there were no problems with the previous version of Chrome. As you stated the issue shows up only on the first appearance of the popup - it shrinks correctly afterwards).
I'm using jQuery in my extension and I think I've partially solved it by adding
$("body").fadeOut(10).fadeIn(50);
though it doesn't always work (it probably will if you increment the fadeIn delay but!). Hope someone can provide a better solution to this.
EDIT. This should be guaranteed to always work (using your hint) although the user might see the resizing happening for a fraction of second:
$(window).load(function() {
$("body").fadeOut(10, function() { $(this).show(); });
});
Related
I'm working on an existing React-Native app, and in the iOS version, there's a problem where a portion of the bottom of the screen does not respond. At first it was thought to be on a specific screen, but upon further investigation, it was found to be affecting other screens as well. The control used on the first screen where the problem was noticed is TouchableOpacity, but a rectangular section in the middle at the bottom of the screen does not respond, but in either corner at the bottom of the screen it does respond. Another screen has a ListView, and if you attempt to scroll from that same bottom middle area, it won't, but everywhere else, it will. This is evident in both the simulator and on the physical device. It acts like there's something in the road floating over the top of everything.
I've tried using the Accessibility Inspector to identify the cause, but this hasn't revealed anything.
The highlighted area in the screenshot above is where I'm referring to.
To complicate things further, this problem doesn't exist in the Android version.
Has anyone experienced this before, and if so, what was the cause and how do I fix it?
Edit: I've now determined the cause is an Animated View that's hanging about, it seems not all the child elements within it are having their opacity set to 0. I've attempted to address this using pointerEvents, but this just moves the problem to a different child element.
Anyone have any suggestions?
The issue turned out to be that the parent was having it's height changed during the show and hide events to avoid this same issue in Android, so we need to only change it if the platform is Android.
this.setState({height: (Platform.OS === 'ios') ? 50: 0});
Surprisingly the SideBarPanel is not the full height of the container by default. I can't figure out how to make it 100% height. This is what it looks like currently.
Notice how its a little less than half the height of the sidebar container. Other panels don't have this issue. I've tried setting the html and body of the panel to 100% through CSS, and I've tried calling
sidebar.setHeight('100%');
both before and after sidebar.setPage. Instead of doing anything, it causes nothing to be displayed (probably because it doesn't support % height from this method). I don't know how to debug the JS or CSS of devtools extensions, so I am not sure how to figure out what is breaking. I know error's can be viewed from the Chrome Devtools Extension, but no error is thrown in this case.
As a bonus question, showing me how to debug devtools extensions would be nice. (Googling impossible since you just get normal debugging guides.)
In case anyone else comes across this when googling, this looks like it's currently fixed in Chrome canary: https://bugs.chromium.org/p/chromium/issues/detail?id=438126
I have just created a dropdown for my site. It works fine in all other browsers except new version of opera that is 12.02.
Webiste Url : http://www.sktechnologyworld.com/demo/anything/
Here when you mouse over on "Categories", it displays dropdown of that categories then when you hover on categories then it displays subcategories of that category. At this time there is background line remains at top of that perticular category and this same thing in all the subcategories. However when i open dragon fly in opera by pressing ctrl+shift+I then it works fine but if dragon fly is not open then it makes it weird.
Its very strange and have not face this kind of problem before. Any help?
Thanks
This is indeed a bug in Opera. As it's merely a cosmetic issue with no big impact on functionality I suggest you just report a bug to Opera Software and forget about it until it's fixed :-)
The root cause is that Opera fails to draw the background colour of the padding-top of the A elements correctly. It's mainly triggered by the padding-top:9px instruction on #CategoriesBar .nav. However, trying to work around it means adding hacks to your CSS and that makes it harder to understand and maintain - even more likely to break in future browsers. Hence reporting a bug and not trying to work around it is your best way ahead.
Here is a simplified demo you can refer to when reporting the bug:
http://jsfiddle.net/sNHbB/
Please let me know the bug reference number and I'll give it a kick for you.
I am asking for help, we have a request dialog in our app, but it appears partly out of the screen so its croped a bit on the right side.
We would like to center it so it wouldn`t be croped. Would anyone know how to fix that please?
Thanks
I had the same problem. I'm not sure about the way how to position dialog itself. IMHO it can also depend on location of click event. Anyway, I've found ugly, but quite functional way to fix it with JavaScript:
setInterval("$('.fb_dialog').css('left', '0');", 1500);
The dialog itself cannot be repositioned.
Are you using iframes in your code by any chance?
Try changing the width in your CSS file to something smaller and see if it makes a difference. The Request Dialog usually positions itself in the middle of a page by detecting the size of the page / frame.
How can I scroll past the last link in a HTMLComponent? I am using LWUIT 1.5.
Moreover if the link spans over multiple lines, it stops on the first line, so the whole link is not visible.
HTML file for testing: http://bit.ly/uJ8RbN
UPDATE: The issue is here http://java.net/jira/browse/LWUIT-487.
Any workaround tips before the issue gets resolved?
Scrolling past the last link works properly in our test cases although its always possible there is a bug in the HTMLComponent implementation. If you found such a case please file an issue in the lwuit issue tracker in the LWUIT website and include the HTML that triggered the problem. The same probably applies to the long links issue.
A simple solution is to add an empty button to the end of the form, format the button to look like the background, without borders etc. This way after the HtmlComponent there is still a button that doesnt have focus but allows you scroll to the bottom.