Basic Screen Layout

1

Hello,

I’m new to the Ionic Framework. I’m having a hard time setting up a basic screen. I’d like to show you the screen and then the markup I’m using. Here is the screen:

+----------------------------------------------+
|                  Title                       |
+----------------------------------------------+
|                                              |
|   Scrollable tab content goes here           |
|   The entire tab area has a background       |
|    Image                                     |
|                                              | 
|                                              |
|                                              |
|                                              |
|                                              |
|                                              |
|                                              |
+----------------------------------------------+
|      Tab1            Tab2             Tab 3  |
+----------------------------------------------+

In an effort to do that, I’m using the following markup. In particular, I’m having problems making sense of page/view structure. I don’t understand when to use ion-content and when to use ion-scroll. I’m also having a hard time getting an image to show in the background of the selected tab. I’m also unable to get the tabs fixed against the bottom. Without further ado, here is my markup:

<div>
  <ion-header-bar><h1 class="title">Title!</h1></ion-header-bar>

  <ion-tabs class="tabs-positive tabs-icon-only" style="background-image:url('/images/background-1.jpg')">
    <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
      <ion-scroll>
        <ion-content>
          <div>My home content goes here</div>
        <ion-content>
      <ion-scroll>
    </ion-tab>

    <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
      <ion-scroll>
        <ion-content>
          <div>My home content goes here</div>
        <ion-content>
      <ion-scroll>
    </ion-tab>
</ion-tabs>
</div>

In summary, I’m having problems figuring out:

  • How to fix the tabs to the bottom of the screen.
  • How to add a background-image behind my tabs
  • How to get scrolling to work.

I apologize if these are dumb questions. I keep reading the docs, which I understand are a work-in-progress. I just feel as though I’m missing something. Thank you for any and all help you can provide.

2

Hey there, well to the framework! Well it seems that you have some issues with your mark up. Theres no need for ion-content to be wrapped up with an ion-scroll.

Take a look at this codepen

I’m not sure why your having problems with the tabs not being fixed, that could be because of the ion-scroll being used too. Take a look a the codepen and give the docs a good read

1 Like