I'm trying to make a mobile site using Kohana 3 and Bootstrap 3, but I got a problem. My collapsed menu isn't working. When I am trying to view the site on my Android Smartphone (4,3") and i press the menu button in the right top corner, it won't show the menu items. This is the code for my navigation bar;
http://pastebin.com/0bprF68u
(i suck with formatting the code in the tags, sorry)
Nevermind i'm dumb, loaded the javascript file of bootstrap before the javascript file of jQuery.
Related
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.
I am using Unicode arrows in an Android app that uses webview to display HTML5 pages.
This is the sample markup for the arrows:
◀
▶
However, the arrows are displayed inside a button as shown in the screenshot. The HLink and Nav classes only modify the colour and positioning. No border or background is used.
When I open the same HTML in a browser, the arrows display fine.
How can I avoid this behavior of the Android web view?
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.
We have a webapp that we're trying to use with android and have run into a z-index issue. We are using asp.net with a lot of custom javascript. Everything works great in chrome, firefox, ie7, 8, 9 and kindle but android does not seem to respect a particular z-index on a div that we create dynamically.
So we have a modal dialog that has a grid control and when you select a grid item, it shows a menu with buttons. These are all divs. So the modal dialog div has a higher z-index than all other page divs and the menu div has the highest z-index. On android, the menu div appears under the modal dialog div.
I've tried numerous things to get this menu to show on top of the modal dialog such as asking for the z-index after the menu is displayed (which is correct, the highest z-index of all absolute items), assigning a new higher z-index after it is displayed, moving the order of the divs around, etc and nothing seems to put it on top of the dialog as it does in all other browsers.
do you have any idea how to create the quick control that has been shown in the Android 4.0.4 default browser for a custom web view? That was very impressive, slide your thumb cross the edge of the screen and some menu items pop out at your finger tip. here is a sample link: http://www.droid-life.com/2012/02/07/tip-browser-quick-controls-expanded-in-android-4-0-4/
I've tried to implement that in a custom web view but failed