White spaces after hiding nav-bar and tabs - Ionic

Ionic Framework ionic-v3
1

I’m trying to hide a nav-bar and tabs (that are at the bottom) in a subpage I found a solution to use access css style and change the display to none .

I successfully hidden the nav-bar and tabs but the problem that it still there is white space in the subpage tableView and the subpage content is between two white spaces as you can see in the screenshot

How can I solve this issue ?

this is my code to hide the nav-bar and tabs

//get all tabs elements
    if (document.querySelector('.tabbar')) {
      this.tabBarElements = document.querySelectorAll('.tabbar.show-tabbar');
    }

    //get all toolbar elements
    if (document.querySelector('.toolbar')) {
      this.toolBarElements = document.querySelectorAll('.toolbar');
    }
  }

  //hide all tabs and the header toolbar when enter page
  ionViewWillEnter() {
    if (this.tabBarElements) {
      this.tabBarElements[0].style.display = 'none';
      this.tabBarElements[1].style.display = 'none';
    }

    if (this.toolBarElements) {
      this.toolBarElements[1].style.display = 'none';
    }

  }

image
screenshot.png1511×869 172 KB

2

I think it is virtually always contraindicated to be directly accessing the DOM in an Angular application. Can’t you achieve your goal with attribute binding instead?

3

the nav-bar and tabs are in the parent page I don’t know how to access parent page attributes from a subpage

For example I have a page called A whrere I put a navbar and a tabs when I navigate to another page called B with push(pageB) the navbar and the tabs of page A still exist in page A . So page A is parent page and page B I called subpage

4

@rapropos

I found what is causing the problem (see the sreenshot at the bottom) but I can’t make change to it by accessing css style

image
screenShot4.png1439×867 129 KB

5

You shouldn’t be doing that. It makes your pages too tightly coupled, and hinders readability, maintainability, and testability.

6

Did you find a way to solve this? I have a similar problem here: How to remove white space created after hiding navbar?

7

Unfortunately no I’m sorry

8

any solution yet? still facing same problem too