Hide address bar on mobile website

ionic-v1
1

I’m trying to use ionic for mobile website development. It’s working great except that the address bar isn’t getting hidden when scrolling down. Anyway I can make it work?

2

isn’t it a mobile browser feature to hide address bar and display page in full screen?

like stock android browser will hide address bar on scrolling down !

3

It is but I think it’s not working because Ionic is actually putting the scroll on some div or something like that and Safari doesn’t detect the scroll therefore not hiding the address bar.

4

i dont think so ionic can target address bar of the browser since its not made for websites.

still try using native scrolling on content/divs.

i dont think it will work but worth a try. add overflow-scroll=”true” .

5

nope, it doesn’t work…

6

Pretty sure the only way to do this is you have to have the user “Add to home screen” from the browser, then it installs an icon. When they open up with the icon there are some HTML settings that it can go full screen.

But it’s basically to make it so the webpage cannot do it by itself.

7

I have done a workaround using css - I have added an id(#mobile-web) to html tag and overridden the ionic style. This is just for a reference. I have tested it personally and its seems working fine. Beware that as the positioning properties have been changed - there will be some layout breaks when using ionic elements that you need to manually customize…

#mobile-web {
  overflow: initial;
  body {
    overflow: auto;
  }
  @media (max-width: 767px){
    .view-container {
      position: static;
    }
    .scroll-content {
      position: static;
      top: initial;
      right: initial;
      bottom: initial;
      left: initial;
      display: block;
    }
    ion-side-menus {
      position: relative;
      top: initial;
      right: initial;
      bottom: initial;
      left: initial;
      overflow: initial;
    }
    ion-side-menu-content {
      position: relative;
      top: initial;
      right: initial;
      bottom: initial;
      left: initial;
      overflow: initial;
      ion-nav-view {
        >.pane {
          position: static;
          top: initial;
          right: initial;
          bottom: initial;
          left: initial;
          overflow: initial;
        }
      }
    }
    ion-view {
      position: static;
      top: initial;
      right: initial;
      bottom: initial;
      left: initial;
      overflow: initial;
    }
    .bar-header {
      position: static;
      top: initial;
      left: initial;
      right: initial;
      bottom: initial;
    }
    .tabs-striped {
      .tabs {
        position: static;
        top: initial;
        right: initial;
        bottom: initial;
        left: initial;
      }
    }
  }
  .menu-open {
    body {
      overflow: hidden;
    }
    .view-container {
      position: absolute;
    }
    ion-side-menus {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
    }
    ion-side-menu-content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      ion-nav-view {
        >.pane {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          overflow: hidden;
        }
      }
    }
    ion-view {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
    }
  }
  .modal-open {
    overflow: hidden;
    .modal, .modal-backdrop {
      overflow: auto;
    }
  }
}
8

Hi Sajan - how are you implementing this on the HTML side of things? I tried using your CSS in my page, but I’m unsure of how to implement in the html view…
e.g. I’ve tried:

<div id="mobile-web">
	<div id="test">hello</div>
</div>

And the test div is just high enough(e.g. 2000px) to make sure I’d have to scroll… and while I do have to scroll, neither the address bar doesn’t disappear automatically. When I do this without ionic, everything works nicely. The problem is that ionic straps itself to the body document, I assume…

Any pointers?

9

did you ever find a solution?