How to use ion-tabs inside a div

ionic-v1
1

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.

I have asked this same question in stack overflow but no reply please help me http://stackoverflow.com/questions/37405483/how-to-use-ion-tabs-inside-a-div
THANK YOU,

2

Hi gopimohan, I have same problem…have you solved it?

3

Did you allready have a fix for this?