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.
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 Delphi XE 8 to build Android app and I have a form that have two buttons at the bottom like this one
How I make sure these buttons still visible when the virtual keyboard appear and position back to the bottom when the keyboard disappear ?, effect would be like this screen:
Please take a look at Embarcadero example: FMX.Mobile.ScrollableForm Sample
and add an extra TLayout with bottom buttons (cancel/continue) - the position of this layout should be assigned according to bounds from VirtualKeyboardShown event handler. There is also another, similar example called KeyboardToolbar. The examples can be also found in "c:\Users\Public\Documents\Embarcadero\Studio\16.0\Samples\Object Pascal\Mobile Samples\User Interface\"
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 created a custom popup menu which is displaying fine on the S4 but the problem is that part of it gets hidden behind the navigation buttons on Nexus 5.
I have tried using the setSystemUiVisibility() but that doesn't help as the buttons reappear as soon as I touch the view.
I have tried looking for an answer but haven't had any luck.
The amount of content in your PopupWindow likely exceeds the screen real estate. Consider using a ScrollView in your PopupWindow's inflated layout.
Background
on Firefox and Chrome apps for Android, if the user scrolls down, the upper actionBar starts to disappear.
if the scrolling is fast enough , it starts an animation to finish the disappearing, but if not, it returns to its normal state.
and there is a similar effect for showing the action bar, only that it's for scrolling up.
The problem
I need to have the same ability to make a customized view that is on the top of the screen (looks a bit like an action bar but it's not).
a part of the view will always be visible, but a part of it will shrink like in the effect of chrome and firefox.
I've looked for libraries that allow such a thing but without any luck.
The question
How can I achieve this behavior?
My guess is that I need to use the scrolling listener of the adapterView , but then what?
I think this library can help, in the inner sample of "animation" :
https://github.com/LarsWerkman/QuickReturnListView
sadly i also use a customized pinterest-like listView, which doesn't report about scrolling (not states, but the real positions as you scroll). in fact it doesn't even extend from AdapterView.