An interesting problem that I have been unable to debug using developer mode in chrome or remote debugging.
The problem appears on smartphones with a screen size that cuts off the responsive menu at the bottom (and hence requires you to scroll down in the menu to get to "Sprache" for example), as in the following screenshot:
To get the bug to appear:
Navigate to https://www.a1.digital
Launch menu on small screen size or in chrome dev tools device
toolbar
Scroll down (important)
Click on a menu item, for example Sprache
You will instead be taken to the menu item above or below it, in the case of Sprache you will be taken to Login
If you open the responsive menu but do not scroll it, then all menu items work correctly. But as soon as you scroll down the menu items appear displaced.
Tested on Android Chrome, Android Firefox and Android Microsoft Edge, but displays in all three tested browsers.
Here is a video showing first how I load the menu, scroll down and click on Sprache, but it loads the menu item above it which is Login.
Then I navigate back to the home page and load the menu again. This time I do not scroll and I click on Marketplace which loads it correctly.
https://youtu.be/ke-33uzD8h0
Ok, so I think I found a solution (not sure if it's the best solution though). But first, the problem:
When you click on the navigation, the class locked is added to your .navbar-collapse.collapse. This happens JUST before the click is registered. .locked adds overflow: hidden to your navigation, which makes it unscrollable. Now if you already scrolled, it will "jump back" to the top edge and register the click on whichever navigation entry is under the mouse at that point. You can actually see this happen just before the page changes. The solution I found for this is the following CSS:
.navbar-collapse.collapse.collapse {
overflow-x: hidden !important;
overflow-y: auto !important;
}
We use .collapse twice, so it doesn't get overridden. This keeps the scrolling active and should help your case. But this may have other consequences, so test it well. Add a comment if you have questions or other problems with this.
Related
I am writing an app with the Salesforce Android SDK.
We have a custom website that is used for the login landing page that has a username and password field.
Clicking on the first field brings focus and keyboard as expected. Clicking on the second field (regardless of which is clicked first) causes the screen to jump up and down for half a second and then leaves the screen so that you can scroll infinitely, even beyond the background image. No matter how far you scroll the scrollbar is stuck at the top. However to scroll back up you have to scroll the same distance you scrolled down.
While this is from the LoginActivity from the Salesforce SDK, I have modified the file to show the action bar at the top.
What is causing this behavior and how can I make it stop, changing zoom controls in the webviews settings does not seem to help.
The same screen in iOS does not seem to have this same behavior.
Worth noting, the defect does not appear in the devices chrome browser.
The Class in Salesforce SDK
According to the Salesforce SDK
There is a ScrollView in a WebView. This shouldn't be necessary and may cause a problem such as the one you described. Changing the ScrollView to LinearLayout should fix the issue.
I have my menu open, and I want to lock my regular webpage which is shifted to the side.
On "mm-opening" I am actually changing my body position to "static", and this does the trick for iPhone and certain Android devices!
However, on for example the Samsung Galaxy Note, while scrolling up and down on my mmenu, the regular webpage scrolls as well.
Any suggestions how to prevent this scrolling from happening?
Thank you.
I try to find a way to disable the quick settings menu bar on Android devices (it appears at least on my Samsung Galaxy Tab S). I mean the one on top of the screen when I swipe down. When I swipe the first time there is only a black small bar with some icons. When i swipe the second time, the whole menu opens and it covers the whole screen. I put already Fullscreen true in my config.xml. It still appears.
I searched forever but didn't find anything. Hope somebody can help me...
Thank you!
I'm trying to make an extra effect to menu that will come down from the top of the screen
I want to make it enter the screen while swiping it from the top and if the user left it, it should continue to the end
this is the figure that demonstrate what I want to do:
I tried to do it with animation but the animation will not go on while swiping and it will go to the end without touching
any other ideas to move the view down with finger ?
Check this out for a sliding Drawer http://developer.android.com/reference/android/widget/SlidingDrawer.html
it sound like you kind of want the same thing as the pulldown menu at the top of all android phones except you want it customized, the link will show you that.
OK
It works for me now
I used SlidingTray.java class from this API
API Website
btw : this api open source
I'm testing my new mobile website in Android devices.
But in emulator default Browser, I can't scroll down, right or left the page. There is no scrollbars, and arrow keys don't work, too. Here is a screenshot from my emulator window (I opened stackoverflow in browser)
I treat my mouse like a touch.
I left click the mouse button at the bottom of the emulator and drag the mouse to the top.
I have noticed that you need to click the mouse left button at the edge of the screen for couple of seconds to activate the scroll. Once activated you use the mouse like a touch.
If you are not able to locate the scroll bar then go back and come back again on your page. While the page is loading, the scroll bar will be highlighted for a brief period of time. You can then click at the location as I have explained above in first paragraph.