Geek Answers Handbook

Extendable toolbar using only HTML and CSS in the Android browser

I have a toolbar at the bottom of my mobile webapp. I would like to drag this panel up and down, showing the content below it. I would like to be able to do this simply using HTML / CSS and not use touch / scroll events or a mobile touch screen / scroll library.

I am trying to do this by overlaying a scroll element on top of the main webapp using the toolbar and its contents below. I gave this element a lower z-index than the main content so that it would not block the user’s interaction with the main content and gave the toolbar and its contents a higher z-index so that it could be seen and pulled / scrolled up.

I created jsFiddle that has the correct behavior on both the desktop and Android versions of Chrome. I can drag the toolbar with my finger or scroll the cursor at the top:

eVVOF.pngv2cJ8.png

Unfortunately, the toolbar does not appear in the Android browser (tested on 4.1 and 4.2).

dZBBm.png

However, when I click where the toolbar should be and is being dragged, it does not scroll the page until I have moved my finger far enough to scroll the toolbar to the end if it were visible. So scrolling the toolbar works in Chrome and indicates that the toolbar scrolls correctly in the Android browser. It is just not visible.

 <div id="main-content"></div> <div id="scroller"> <div id="wrapper"> <div id="toolbar-and-content"> <div id="toolbar">Toolbar</div> <div id="toolbar-content">Toolbar content</div> </div> </div> </div> 
 #main-content { position:relative; width:100%; height:300px; background-color:green; z-index:1; } #scroller { position:absolute; top:0; width:100%; height:300px; overflow:auto; } #wrapper { position:relative; width:100%; height:500px; } #toolbar-and-content { position:absolute; bottom:0; width:100%; height:250px; z-index:2; } #toolbar { width:100%; height:49px; border-bottom:1px solid black; background-color:red; } #toolbar-content { width:100%; height:200px; background-color:orange; }

I believe that it does not work in the Android browser because it decided to ignore the toolbar above z-index , since it is in the element with a lower z-index .

Anyway, does anyone know how I can change this to work in the Android browser, and / or are there other layout schemes that I can use to achieve what I want with HTML / CSS only?

+6
source share
1 answer

I checked your example in the emulator, try adding:

 z-index: 2;

to your #scroller:

 #scroller { position:absolute; top:0; width:100%; height:300px; overflow:auto; z-index: 2; // NEW }

Worked fine for me

Why do you need a z-index on # main-content? If you could just skip it, it would work even without the extra z-index on #scroller.

+1
source

More articles:


All Articles