Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a month ago

The ion-tab is positioned above the ion-content, while the ion-tabs are positioned below the ion-content.

One of my tasks is to add an ion-tab-bar component on top of my ion-content component. However, when I do this, it creates a black bar above the ion-content component. My next step is to add an ion-tabs component to the bottom, but I also encounter the same issue. What can I do to achieve the desired result? Please take a look at the code snippets below for reference. HTML: 
<ion-tab-bar slot="top">
</ion-tab-bar>

<ion-content id="mapId" style="height:100% ; width:100%">
</ion-content>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="spots">
      <ion-icon name="map-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="vending">
      <ion-icon src="assets/vending.svg"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="favoriten">
      <ion-icon name="bookmarks-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="startseite">
      <ion-icon name="home-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="me">
      <ion-icon name="person-outline"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
CSS: 
ion-header{
  --ion-toolbar-background-color: transparent;
  --ion-toolbar-text-color: white;
}

ion-tab-bar{
  --border:none;
  --background: rgba(255,255,255,5);
  margin: 15px 15px 0px 15px;
  border-radius: 14px;
  box-shadow:
  0px 3px 6px 0px rgba(0,0,0,0.04),
  0px 1px 3px 0px rgba(0,0,0,0.02);
}

ion-tabs{
  margin-bottom: 20px;
}
To solve this issue, I can adjust the CSS styles of the ion-tab-bar and ion-tabs components. I can remove the commented "position: absolute" style, adjust the margin to fit my needs, and also add a margin-bottom to the ion-tabs component to ensure that it aligns properly.
Answers(1)
avatar
Tolerim
a month ago
Verified Answer
To achieve the desired result, you can add a position: relative; property to the ion-content element in page.css. This will make the ion-tab-bar appear on top of the ion-content element instead of above it. Here's what your updated page.css should look like: 
ion-header{
  --ion-toolbar-background-color: transparent;
  --ion-toolbar-text-color: white;
}

ion-tab-bar{
  --border:none;
  --background: rgba(255,255,255,5);
  margin: 15px 15px 0px 15px;
  border-radius: 14px;
  box-shadow:
  0px 3px 6px 0px rgba(0,0,0,0.04),
  0px 1px 3px 0px rgba(0,0,0,0.02);
}

ion-content {
  height: 100%;
  width: 100%;
  position: relative; /* add this line */
}
Similarly, to add the ion-tabs component at the bottom of the page, you can simply add it directly below the ion-content element in page.html. Here's an example: 
<ion-content id="mapId" style="height:100% ; width:100%">
  <!-- your content here -->
</ion-content>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <!-- your tabs here -->
  </ion-tab-bar>
</ion-tabs>
Note that you don't need to modify nav.css to achieve the desired result.
;