I have my site: site. It is looking good in Chrome and Edge. But if you use Firefox or IE, the footer moves to the right. How I can to move it back?
Related
I'm having an issue with the browser of the Google App on iPhone (known simply as "Google" in iTunes).
Background: on iPhone, both browsers (Google Search & Assistant and Safari) have a bottom nav-bar that appears/disappears as you scroll up and down a website page.
In any case, in many of my sites, I have a button in most pages, with position "fixed" to the bottom of the screen. In the Google browser, when I scroll up and down the page, this button appears/disappears and is replaced by the bottom nav-bar.
And when the bottom nav bar disappears and the button reappears, it is not clickable as it seems that there's an invisible layer that prevents it from happening. The "normal" behaviour in these cases seems to be for the bottom nav-bar to reappear. So, in fact, this button becomes "unclickable".
Now, when I try the same pages using Safari, the browser is "smart enough" to nudge the button up, keeping it clickable.
If you want to have a sense of this behaviour, you can find it in this page: https://www.avenuefive.com.
Why is this? Is this a bug of Google App? A feature that is not supported (fixed position)? Or something else altogether?
I have recently built a new Vaadin widgetset for our web application. The new widgetset is based on some new addons but especially on vaadin 6.8.12.
When I deploy the ear file and start the application the right vertical scrollbar that belongs to the web browser (not a java panel or layout) is missing. The scrollbar is actually there but you are forced to drag the browser window far to the right in order to make it visible. Even though it is visible you can not scroll down as much as you need to view the lower content of the page.
This is a problem in Chrome, Firefox and Opera but for some reason Interner explorer seems to handle it just fine.
So what I want is that the browser scrollbar should be visible regardless of the size of the window.
Any ideas?
The height of a layout must be undefined for the vertical scrollbar to show up. If you set it to 100%, any content off the bottom of your browser window / tab will be hidden.
If that's not enough, please add some code to see how you made your main window layout.
This is not a question about JQM panels scrolling independently of the page, though that is an issue I've had trouble with and almost overcome, this is about making the panel scroll smoothly and ignore the device browser's edge event (or whatever the correct term is, I'll explain below).
Basically, I'm trying to replicate the menu on Google's mobile site, which naturally isn't using JQM like us common folk. I've got it pretty close, but the scrolling animation is very rigid. I need it be momentum-based rather than fixed to your finger.
Also, when you reach the top or bottom of the menu, it's considered the extremes of the document so the browser moves the whole document up or down to indicate the edge of the page. Instead, the page should never move while the panel is open and the menu should take on this behaviour within the panel.
Since I've set the panel height to 100%, this forces the address bar on iOS Safari to come down when the menu is open. This seems to be exactly what happens on Google, but if there's a way around this I'd love to hear it.
Finally, one downside of the way I've emulated independent scrolling is to just set the content wrap as fixed when the panel is open. However, this means the page always scrolls to the top when the panel opens. Any alternatives for this would be appreciated. I suppose I could just set the page top as scrollTop or something.
To summarise:
Panel menu needs to scroll smoothly (momentum rather than direct touch)
Elastic edge on menu rather than window
iOS Safari address bar interfering with height
Page fixed at top when panel open
If any of my descriptions don't make sense, just visit google.com on your phone and check out their menu.
ScrollFix seems to have solved all my issues.
I created a horizontally scrollable container with sorting.
There are some requirements:
The bounding box is fixed width
Must scroll when overflowing, no wrapping
Here is the JSFiddle: http://jsfiddle.net/6vXG2/ (drag columns with pink header)
This works perfectly with: IE9, Opera, Safari
But not working with: Chrome, Firefox
In both Chrome and Firefox, the elements start jumping around. (Incidentally, the behavior on Firefox is different between Windows and OSX, using exactly the same version - 17.0.1)
When initially designing it using float:left, all browsers behaved correctly, but due to no wrapping requirement, I cannot use this.
Any ideas how to fix this? Or is this a jqueryui bug/issue?
Thanks
EDIT:
If I add border-collapse: collapse it behaves correctly again in Chrome, but breaks in Opera.
EDIT 2:
Found a 'weak' workaround going back to float:left: See http://jsfiddle.net/6vXG2/1/. Not ideal, but OK for now. Still open for suggestions.
PLEASE NOTE: This is not a "use two fingers to scroll" problem. Whether it is one finger, or two, or three, or the whole hand, for some reason our iframe does not scroll on an iPad. :)
Here is the scenario:
In our web application, which is built using EXT-GWT, we have a few windows that open as (maximized) pop-ups and present some forms to the users. These forms, which are most of the times external, are rendered in an iFrame and some of the forms have their content collapsed at the initial load - the user can choose to expand any section of the form, fill it in and submit. Now everything works fine except the scrolling in iPad. After the iframe's content is loaded and collapsed (collapsing is done using JS on the client side, basically, the content loads as expanded by default and then is collapsed by JS) iPad just fails to provide scolling to the iframe. Even after the content of the iframe is expanded the iframe does not get any scrolling.
As of now, we have solved this problem by increasing the height (using JavaScript) of the EXT-GWT window to the size of the expanded iframe body content. This makes the whole window scrollable, instead of just the iframe within the window. While it works, the window becomes way to big, so I was wondering if there is any better way for us to provide scrolling to the iframe.
Thanks for the help,
Nitin
For iOS devices you need set overflow: auto; or the scrolling won't work. For my web apps I used fancybox to display iframes modally and once I change the overflow setting in the css file the two finger scroll worked perfectly on the iPad.
After trying (almost) everything, I have come to the conclusion that increasing the GWT window height to the iframe.body.height is the only solution for getting the window/iframe to scroll on iPad. Hopefully, this will help someone in future.
I´m pretty new to GWT, but for me it worked like this:
The parent-div of the iframe has a class in my case, x-component.
I made an entry to my css file like this:
.x-component{-webkit-overflow-scrolling: touch; overflow:auto;}
It works as well if I set these entries not to the class, but to the div-element itself.
Hope that helps