i use ionic-framework to create my webapp. I need to insert in the middle of the page (inside ion-content) a block with 3 tabs. There is a conponent called ion-tabs but it has only 2 possibilities of position: bottom or top. Nobody knows any solutions? thanx
<ion-view>
<!-- TOP BAR -->
<ion-nav-buttons side="left"></ion-nav-buttons>
<!-- PAGE CONTENT -->
<ion-content class="has-header">
...some content
TABS menu
...other content
</ion-content>
</ion-view>
Related
I've a view with textangular as an element. On Android(I tested), if the keyboard is opened, the view is not scrolling up to prevent the editor from getting behind the keyboard.
I installed the Keyboard plugin com.ionic.keyboard.
This is the structure of the page:
<ion-view id="newblogview">
<ion-nav-buttons side="left">
...
</ion-nav-buttons>
<ion-content scroll="true" overflow-scroll="true" class="has-header" delegate-handle="mainScroll">
<iframe data-tap-disabled="true" style="width: 100%; min-height: 100%" src="./templates/blog/html/blog-editor.html" name="blogeditor" id="blogeditor"></iframe>
</ion-content>
</ion-view>
it's not moving up when the keyboard is opened by focusing on the input.
I've tried android:windowSoftInputMode="adjustPan" and also "adjustResize"
And also I've tried native.keyboardshow event to call $ionicScrollDelegate.scrollBottom(true);
I think we've Keyboard attach directive for footer, but I can't place text editor in the footer.
Does ionic framework support adjusting ion content to keyboard show/hide? is this feature is not supported yet in framework or am I missing something.
This question is similar to another thread, but there is no accepted answer.
Please help.
-Prakash.
You can add this to your html component
<div delegate-handle="toThisPosition" ng-click="GoHere()"> </div>
and adding this to the ng-click method GoHere() in your controller:
GoHere() {
$ionicScrollDelegate.$getByHandle('toThisPosition').scrollBottom(true);
}
i am created an app UI with ionic creator and am trying to add new page in ionic application manually but it display without header and all other pages are displaying with header.
thanks in advance.
Hello try this code in your html page.
<ion-view view-title="Welcome" class="padding" hide-nav-bar="true">
<ion-content padding="false">
</ion-content>
</ion-view>
I'm using the awesome framework Ionic to build my first application.
I want to be able to navigate between ion views without the need to use a nav bar.
I have page1 and Page2 I can navigate to the page 2 from the page 1 but I can get back to the page 1 from the page 2.
i'm using a simple button to naviate like :
<button class="button button-clear button-positive" ui-sref="tab.chats" >go</button>
here is my full code : PLUNKER CODE + DEMO
You're using your tabs wrong.
Your tabs must be wrapped in a tabs directive.
<ion-tabs class="tabs-item-hide">
<ion-tab title="dash" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<ion-tab title="chats" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
</ion-tabs>
tabs-item-hide cause you want to hide them.
Plunker.
I have an ionic modal window which serves as setting's menu
plan is to use the modal with a small header and inside the content use the ion-tabs directive in a simple manner that each click shows and hide's a div
I've read the docs saying that they have a bug related to using the tabs inside a ion-content, so im aware of it.
how then can i achieve this funcionallity, if i remove the ion-content than the tabs directive is being pushed down instead of showing on top of the screen, here is the markup for the modal:
<ion-modal-view>
<ion-header-bar style="background-color: #40863E">
<h1 class="title" style="color:white;">My Account</h1>
<div class="button button-clear" ng-click="closeModal()"><span class="icon ion-close"></span></div>
</ion-header-bar>
<ion-content>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Message" icon-on=" ion-android-chat" icon-off="ion-ios7-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="Payment History" icon-on="ion-social-usd" icon-off="ion-ios7-clock-outline" on-select="showPayments()">
</ion-tab>
<ion-tab title="Edit" icon-on="ion-android-settings" icon-off="ion-ios7-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
<ion-tab title="Sign Out" icon-on="ion-log-out" icon-off="ion-ios7-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>
<div id="payments" class="row" style="margin-top:43px;height:51px;">
some payments content
</div>
</ion-content>
</ion-modal-view>
*UPDATE
adding a picture to describe the problem
Try to use ion-pane instead of ion-content.
Remove the <ion-content> tag and then you can use CSS to push the top of the tabs down. ionContent is good about knowing when a header is used, but it does have some issues when ionTabs are inside. Something like the following, but you might need to use a more specific CSS selector.
.tabs { margin-top: 44px; }
I'm all new to Ionic, and this is my first project. I'm creating a little app with tab navigation in the bottom.
One tab view looks like this:
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
</ion-content>
</ion-view>
I want to add a button in the header next to Account, and according to documentation you use the ion-nav-bar elements, but no button shows up when I try this. Can anyone give me a clue how to add buttons in the header, in a tab view?
You can make use of ion-nav-button like this:
<ion-view title="Account">
<ion-nav-buttons side="left">
<button class="button" ng-click="doSomething()">
I'm a button on the left of the navbar!
</button>
</ion-nav-buttons>
<ion-content class="has-header padding">
<h1>Account</h1>
</ion-content>
</ion-view>
Example 1
Example 2