I want to create a header using ionic framework.
It will show an image and 2 buttons.
The image has to be aligned horizontally to the left and the 2 buttons to the right.
The next code show everything, but the image is centered, is it posible to align the image to the left?
<ion-view title='<img class="title-image" src="img/logo_elizondo_ch.png" />'>
<ion-nav-buttons side="right" >
<button class="button" ng-click="doSomething()">
Right
</button>
<button class="button" ng-click="doSomething()" >
Right 2
</button>
</ion-nav-buttons>
<ion-content>
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
You will have a parent for this view ? Namely, a abstract state in app.js file (assuming that you are using of the ionic starters).
That abstract state would have a templateUrl attribute.
Inside that template html file, you will have a directive to alter the header alignment. You can set it's align-title property.
<ion-nav-header align-title="left"></ion-nav-header>
Ofcourse, this answer is based on many assumptions. If you share a codepen of your code, or explain more in detail, that would be better.
UPDATE:
The above is one of the better solutions. Another solution would be to use ionNavTitle
directive.
use css position absolute
.title-image {
position: absolute;
left: 0px:
}
Related
I'm using ionic and angularJS in my application, I need to expand and collapse list view. As of now I created the list view using ion-list and ion-item without expand and collapse. Please find the code and snap below.
<ion-view view-title="Call Lists">
<ion-content class="padding">
<ion-list show-delete="false" can-swipe="true">
<div class="list card-ScheduledCalls">
<!-- Task # -->
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="item in callItems" type="item-text-wrap" ng-click="doTask()">
<img ng-src="{{item.imgSrc}}">
<h3>{{item.callCount}}</h3>
<h3>{{item.callDate}}</h3>
<p style="color:white;">{{item.callCmt}}</p>
<p style="color:white;">{{item.callType}}</p>
<p style="color:white;">{{item.assetType}}</p>
<p style="color:white;">{{item.requestedBy}}</p>
<p style="color:white;">{{item.issueType}}</p>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
Now I have more details in the each list for eg: EmpName, BloodGroup, EmpTodayTaskName, TaskTime, TaskDuration, TaskComments, etc. First I will show only three fields in the list, If a user clicks the more button (mentioned in the image) I will show remaining details.
At the same time, I'm having tapping (ng-click) functionality to go next page so I restrict the user that If they select the more button only to do expand and collapse other touches it will move into next page.
How can I handle this activity in ionic and angular ?
If I understand this correctly, the app needs to go to the next page if the content inside of the ion-item is clicked. If so, why not to wrap ion-item content inside some container, for example div, and attach the required ng-click there
I have an application that work in LTR or RTL mode, and im trying to update the menu to reflect the direction, so this is what i did:
<ion-view id="home" hide-back-button="true">
<ion-nav-title>
<img ng-src="{{logo_path}}" class="header-logo"/>
</ion-nav-title>
<ion-nav-buttons side="{{ (is_rtl) ? 'right' : 'left' }}">
<button menu-toggle="{{ (is_rtl) ? 'right' : 'left' }}" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
...
</ion-content>
</ion-view>
And the is_rtl is the variable set in the controller to know the direction. The problem is this does not have any effect. It appears that ionic does not parse the variable in the side part. Entering right or left manually works fine, but doesnt look it can work dynamically like. I even tried ng-if with no luck:
<ion-view id="home" hide-back-button="true">
<ion-nav-title>
<img ng-src="{{logo_path}}" class="header-logo"/>
</ion-nav-title>
<ion-nav-buttons side="left" ng-if="!is_rtl">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right" ng-if="is_rtl">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
How can I solve this?
Thanks.
Update 1
I noticed The second try using ng-if partially works, but only if i navigated to a screen and returned back to the home screen, it does not work on initial load.
Just a quick note, the ion-nav-buttons directive must be the first descendant of the ion-view for it to work. From the docs:
Note that ion-nav-buttons must be immediate descendants of the
ion-view or ion-nav-bar element (basically, don’t wrap it in another
div).
It looks from the source code the side attribute is not being interpolated so no matter what you do, it'll always resolve to the html you pass. This is the snippet from their compile function
var side = 'left';
if (/^primary|secondary|right$/i.test(tAttrs.side || '')) {
side = tAttrs.side.toLowerCase();
}
Meaning that tAttrs.side will equal to "{{is_rtl}}" and not the actual boolean value.
Also it looks like ng-[if|show] will not work here because the lifecycle of the directive is being handled by the $ionNavBarController on init.
In short it looks like your feature with ion-nav-button isn't possible at the moment. However you might be able to pull it off by setting the nav-bar hidden with <ion-view hide-nav-bar="true"> and then set your controls in a custom ion-header-bar like this:
<ion-header-bar>
<div class="buttons" ng-class="{'buttons-right': is_rtl}">
<span ng-class="{'right-buttons': is_rtl}">
<button class="button button-clear">
Right button block
</button>
</span>
</div>
</ion-header-bar>
I'm writing a canvas app and the canvas resides in my main view. On orientation change, I'd like to hide the header and footer.
I can't use a new view, because it would wipe out the canvas element (or at least hide it), and I'd have to re-run a bunch of graphics initialization code. Instead, I just resize the canvas to match the horizontal phone dimensions.
So, when the phone is horizontal I need to hide the header and footer of my view. Any ideas?
EDIT
So you can hide the footer with an ng-show. The same is not true of the header, which I'm still stuck on.
Here is a copy of my view:
<ion-view title="My Title">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header has-footer" id="testCanvas" overflow-scroll="true" on-scroll="scroll()">
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive" style="padding-bottom: 60px;">
<div class="button-bar">
<button class="button icon-left ion-ios7-cloud-upload-outline" ng-click="go('save')">Save</button>
<button class="button icon-left ion-ios7-folder-outline" ng-click="go('load')">Load</button>
<button class="button icon-left ion-ios7-play-outline" ng-click="play()">Play</button>
</div>
</ion-footer-bar>
</ion-view>
So, adding the following attribute to your ion-view will hide the bar, and then removing the class "has-header" from ion-content will move your content upwards.
<ion-view hide-nav-bar="true"></ion-view>
However, it doesn't look like you can do this dynamically. i.e.:
<ion-view hide-nav-bar="{{hide}}"></ion-view>
...doesn't work. I'd welcome any thoughts on how to make it dynamic.
*I already answered the question about removing the footer bar in the edit
I'm building an Ionic app, but have run into a minor problem that I don't understand and can't seem to resolve.
I have a ion-item that is hardcoded and an ion-item that is generated using ng-repeat. I'm using css to center the text in both of them, however, the ion-item generated using ng-repeat is slightly more to the left compared to the hardcoded one.
It seems to only be a problem when I'm using ion-view and templates. If I move the code to index.html they are both centered correctly.
Any ideas to what is causing it and what I can do to fix it?
link to plunker: plnkr.co/edit/tUM7pL54OlyCQwr2qu3o?p=preview
Html Structure:
<ion-view title="Home">
<ion-content>
<div id="menu">
<ion-list>
<ion-item class="item-trns">
test
</ion-item>
<ion-item class="item-trns">
more test
</ion-item>
</ion-list>
</div>
<div id="categories">
<ion-list ng-controller="CatCtrl">
<ion-item class="item-trns" ng-repeat="category in categories" ui-sref='{{category.view}}'>
{{category.title}}
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
Thanks,
Kasper
Your problem is ui-sref tag, it add "item-content" class to your auto generated ion items, this class adds padding: 16px 49px 16px 16px; to your elements. If you remove the ui-sref, your generated ion-items will be centered.
The ui-sref directive creates a <a> into each <ion-list>
if you whish to align both, you need to adapt CSS if the freshly created element without padding
By adding this class, you can overide the default style and keep your ui-sref
a.item-content {
padding-left:0px !important;
padding-right:0px !important;
}
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