Concealing tab bars on Ionic 2 secondary pages

In my Ionic Bootstrap configuration, I have the following setup:

{
   mode: 'md',
   tabsHideOnSubPages: true
}

However, despite having this setting in place, the tabs still appear on some sub-pages. It seems to be happening randomly. Is there a better approach to handling this?

Contact me at : [email protected]

Thank you, Artur

#

EDIT:

To hide the tabs, I am currently using the following workaround:

ionViewWillEnter() {
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) {
        Object.keys(tabs).map((key) => {
            tabs[key].style.transform = 'translateY(56px)';
        });
    } // end if
}

ionViewDidLeave() {
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) {
        Object.keys(tabs).map((key) => {
            tabs[key].style.transform = 'translateY(0)';
        });
    } // end if
}

However, I feel that this method is not ideal. Can anyone suggest a simpler solution?

Answer №1

Latest Response in 2017

As per the information provided on the Ionic framework documentation, you can easily hide tabs on subpages by adding tabsHideOnSubPages: true to your app's Ionic configuration like the example below:

In your app.module.ts file:

imports: [
  BrowserModule,
  IonicModule.forRoot(AppComponent, {
    tabsHideOnSubPages: true
  })
]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to insert an empty <option> into a dropdown menu using jQuery and ajax functionality

I'm working on a JavaScript function that dynamically populates a select dropdown based on the value of another select dropdown. I want to include an empty option at the beginning. Here is the code snippet for the function: function createParkFloorM ...

Pass RGBA color code from JavaScript to Laravel controller

I have an exciting project where users need to select a color value in hex format. Once I retrieve this value in JavaScript, I convert it to Rgba format. Now, my challenge is figuring out how to send this converted value to the controller for database stor ...

Exploring the Power of Elasticsearch with Datatables

I'm attempting to utilize functions from an Elasticsearch instance in conjunction with datatables to exhibit results. Currently, I am only able to display 10 results, regardless of the query used. Even though there are 141,000 results in Elasticsearc ...

Perform an Ajax request upon clicking on the dropdown list item

I recently created a drop-down list using some JavaScript code. Here's how I did it: <script> $('.menu').dropit(); </script> <ul class="menu"> <li> <a href="#">Product_name</a> ...

Fade in and out MaterialUI text using useEffect in combination with setInterval

I have implemented a text carousel using MaterialUI's Fade component. The carousel displays text from an array provided in a prop called dataArray. To achieve the carousel effect, I am toggling the boolean value of the Fade component and updating the ...

Potential explanation for unexpected Typescript initialization error

I am encountering the compiler error The property 'options' is not initialized or assigned in the constructor. However, upon reviewing the code for the respective class, it is clear that this reported error does not accurately reflect the actual ...

Swapping out a character on a webpage using jQuery

Can someone help me remove the colon from this code snippet on my webpage? <h1><b>Headline:</b> something</h1> I'm looking for a simple solution using jQuery, as I am a beginner in JavaScript. Please include the complete code ...

Receiving an unanticipated value from an array

Actions speak louder than words; I prefer to demonstrate with code: //global variable var siblings = []; var rand = new Date().getTime(); siblings.push('uin_' + rand); alert(siblings['uin_' + rand]); // undefined Why is it coming up ...

What is the reason for the regeneration of the 2D array?

I have a method called generateWeights() that retrieves random values in an array; And a method named learn() that calls the changeWeights() method to alter the values in the array. Expected: Prior to invoking the learn() method, I anticipate receiving an ...

Creating a unique filter that combines and filters data from two separate API calls for

In my current scenario, I am making two different API calls using Axios in my application. The first call fetches a complete JSON file that populates a table, while the second call retrieves only categories. This setup is due to the complexity of the app, ...

Pattern matching to eliminate line breaks and tabs

Hey there, I'm working with a string: "BALCONI \n\n\t\t\t\t10-pack MixMax chocolade cakejes" and trying to tidy it up by removing unnecessary tabs and new lines. I attempted using .replace(/(\n\t)/g, '&apo ...

Typescript and Apollo Client return types intertwined

My goal is to create a simple function within a class that generates an Apollo Client. Below is the code I have implemented: import appConfig from 'config/app-config'; import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/clie ...

Is there a way to display a date that is two days before the current date in a React date picker using only vanilla JavaScript

Greetings, I am currently immersed in working with a Shopify app that utilizes React. Unfortunately, I do not have access to their code base or API. The challenge at hand is sending the correct delivery date to the Shopify system. The app currently allows ...

React: State does not properly update following AJAX request

I'm currently facing a challenge in my React project where I need to make two AJAX calls and update the UI based on the data received. Below is the implementation of my render method: render() { if (this.state.examsLoaded) { return ( ...

Unable to resolve all parameters for the RouterUtilities class

My goal is to develop a RouterUtilities class that extends Angular's Router. Despite the app running and compiling smoothly, when I run ng build --prod, it throws an error message like this: ERROR in : Can't resolve all parameters for RouterUtil ...

Incorporate functionality into a button using jQuery

I am working on a table that displays data in different levels (Parent, Child, Grandson). When I click on the parent row, it expands to show new rows related to the child level. Similarly, clicking on a child row reveals a third level known as the grandson ...

An issue occurred in resolving dependencies for the UsersService in Nest

I've been experimenting with Nest a bit, attempting to create a module that I can publish on my private repository for reuse in future projects. However, I've run into an error: ERROR [ExceptionHandler] Nest can't resolve dependencies of the ...

Retrieve the name of the file from a given URL by using JavaScript/jQuery, even when only the directory path is

I need to extract the current filename from the URL using: $currentFile = window.location.pathname.split("/").pop(); This method functions properly when the full path looks like: http://www.yoursite.com/folder/index.php It will return index.php, index. ...

Add axios requests to the axios.all array

Good evening. I am currently trying to insert an array into the axios.all([]) structure! This is the code snippet I am working on: app2.js new Vue({ el: '#central', data: { estilo: 'resize:none;text-align:center;color: ...

Is there a way to include a variable in the URL for an AJAX call?

When working with a PHP function that requires an ID and adding a variable to the Ajax URL, the following code snippet can be helpful: PHP Code: function get_json_selected($purpose) { $ids = explode(",", $this->input->post("ids")); ...