CODEWITHSUNDEEP
htmlangularjsionic-frameworktabs
user6112636
user6112636

Reputation:

How to use ion-tabs inside a div

I am working on ionic1 and angularjs I have already worked with tabs but now I am facing an issues where my tabs should be appear only in a particular div so on the particular area of my html page only my ion-tabs should work but it is not displaying well as we i am expected.

here is my .html page

<ion-modal-view>

    <div class="bar bar-header bar-calm">
      <button class="button icon ion-navicon"></button>
      <h1 class="title">Happy Home</h1>
      <button class="button" ng-click="closeLogout()">LogOut</button>
    </div>

    <ion-content>
        <div class = "row responsive-sm" style = "padding-top:50px">
            <div class = "col">
                <label class="item item-input item-select">
                <br>
                    <select>
                      <option>B09-301</option>
                      <option selected>G45-94</option>
                      <option>R8910</option>
                    </select>
                </label>
            </div>
        </div> 
        <div style="background-color: #DEE0E0">
            <div class = "row">
              <div class = "col-33">
                <div class="card">
                    <div class="item item-text-avatar" style="background-color: #11C1F3">
                      <i class="icon ion-ios-home item-floating-label" ></i>
                        MEMBERS
                    </div>
                </div>
              </div>
              <div class = "col-33">
                <div class="card">
                    <div class="item item-text-avatar" style="background-color: #11C1F3">
                  <i class="icon ion-model-s item-floating-label"></i>
                    Vechical
                  </div>
                </div>
              </div>
              <div class = "col-33">
              <div class="card">
                <div class="item item-text-avatar" style="background-color: #11C1F3">
                  <i class="icon ion-ios-bookmarks item-floating-label"></i>
                    Booking
                </div>
              </div>
            </div>
            </div>

            <div class ="row">
                <div class = "col col-top">
                    <div class="card">
                        <div class="item item-text-avatar" style="background-color: #11C1F3">
                          <i class="icon ion-person-stalker item-floating-label"></i>
                            Staff
                        </div>
                    </div>
                </div>
                <div class = "col col-top">
                    <div class="card">
                        <div class="item item-text-avatar" style="background-color: #11C1F3">
                          <i class="icon ion-ios-home-outline item-floating-label"></i>
                            Visitor
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class = "row">
            <ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
              <ion-tab title="MyDues">
                <ion-content>
                  <h1>happy home Dues</h1>
                </ion-content>
              </ion-tab>

              <ion-tab title="Deposite">
                <ion-content>
                  <h1>happy home Deposite</h1>
                </ion-content>
              </ion-tab>

              <ion-tab title="Advance">
                <ion-content>
                  <h1>happy home Advance</h1>
                </ion-content>
              </ion-tab>

              <ion-tab title="History">
                <ion-content>
                  <h1>happy home History</h1>
                </ion-content>
              </ion-tab>
            </ion-tabs>
        </div>
    </ion-content>

Here you can see the ion-tabs where i have implemented the tabs div and here is the sample image where i should use ion-tabsenter image description here help me if some one know how to use the ion-tabs for my MY DUES,ADVANCE,DEPOSIT,HISTORY.

THANK YOU,

Upvotes: 4

Views: 2387

Answers (2)

Jefferk Yacelga
Jefferk Yacelga

Reputation: 151

Put inside of <div> and add this css to this div
width: 100%; position: fixed;

Working for me

Upvotes: 1

creonilso rodrigues
creonilso rodrigues

Reputation: 479

I am working on ionic 3, I got this way, I put the tab inside ion-content and works for me.

<ion-content>
<ion-card>
    <ion-row fixed padding>
        <ion-col>
            <h2 class="card-titulo"> Localidade</h2>
            <h2 class="card-titulo"> Data Início</h2>
        </ion-col>
        <ion-col>
            <h2 class="card-descricao">
                <ion-icon name="pin"></ion-icon>
                Fortaleza-CE
            </h2>
            <h2 class="card-descricao">
                <ion-icon name="calendar"></ion-icon>
                24/01/18 10:47
            </h2>
        </ion-col>
    </ion-row>

    <ion-row>
        <ion-col>
            <ion-item>
                <ion-label>Clima</ion-label>
                <ion-select [(ngModel)]="clima">
                    <ion-option>Frio</ion-option>
                    <ion-option>quente</ion-option>
                </ion-select>
            </ion-item>
        </ion-col>
        <ion-col>
            <ion-item>
                <ion-label>Equipamento</ion-label>
                <ion-select [(ngModel)]="equipamento">
                    <ion-option>Medidor</ion-option>
                    <ion-option>Equipament teste</ion-option>
                </ion-select>
            </ion-item>
        </ion-col>
    </ion-row>
</ion-card>
<ion-content>
    <tabs-obra></tabs-obra>
</ion-content>

<ion-fab bottom right>
    <button ion-fab mini (click)="abrirListaAtividade()">
        <ion-icon name="checkmark"></ion-icon>
    </button>
</ion-fab>

Upvotes: 0

Related Questions