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;
}
Related
I have ion-item, with ion-checkbox and ion-labels elements inside, and an a element inside ion-label:
<ion-item class="userAgreement" text-wrap no-border no-lines>
<ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>
<ion-label>I accept the terms of
<a (click)="GoToUserAgreementPage()" class="linkText">User
Agreement</a>
</ion-label>
</ion-item>
Checkbox is clickable itself, but when I click on User agreement text inside ion-label, whole ion-item is clicked and it affects checkbox. I want checkbox to be clickable only if clicked on itself, and be able to click only on that part of text inside a element inside ion-label.
If you take a look at the Ionic docs that's actually how a checkbox with a label wrapped in an ion-item works.
To get the behaviour you want, don't wrap your checkbox and label in an ion-item, but instead recreate the look of an ion-item. Therefore you could use display: flex or a grid.
Raw draft using display: flex and some inline styles looks something like this:
<div style="align-items: center; display: flex">
<ion-checkbox style="padding-right: 10px" formControlName="agreementCheckbox"></ion-checkbox>
<ion-label>I accept the terms of
<a (click)="GoToUserAgreementPage()" class="linkText">User Agreement</a>
</ion-label>
</div>
Just wrap the ion checkbox with an ion-item. In my case I don't want any label but if you want just use for.
<ion-item class="userAgreement" text-wrap no-border no-lines>
<ion-item>
<ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>
</ion-item>
<ion-label>I accept the terms of
<a (click)="GoToUserAgreementPage()" class="linkText">User
Agreement</a>
</ion-label>
</ion-item>
Try wrapping the ion-checkbox within another ion-item. It appears to me the parent ion-item will not propagate click events to any controls inside child ion-items.
Clicking on the child ion-item will toggle the checkbox as expected.
<ion-item class="userAgreement" text-wrap no-border no-lines>
<ion-item>
<ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>
</ion-item>
<ion-label>I accept the terms of
<a (click)="GoToUserAgreementPage()" class="linkText">User Agreement</a>
</ion-label>
</ion-item>
I'm having trouble with the Ionic 3.3.0 virtual scroll due to the fact that I have a ~360 items array and it only displays the first 15 on the phone. Has anyone encountered this issue?
P.S.: The virtual scroll list is in a container that has 35% of the screen height. Don't know if this has an effect on the issue or not...
this.friendsList = [{name: 'John'},...,{name: 'Zed'}];
<div class="friends-list__container">
<ion-list [virtualScroll]="friendsList">
<ion-item *virtualItem="let friend">
{{friend.name}}
</ion-item>
</ion-list>
</div>
After researching the issue, it seems that the solution was to add an extra DIV wrapper around the virtual scroll list:
<div class="friends-list__container">
<div> <!-- This is needed for the virtual scroll to work properly -->
<ion-list [virtualScroll]="friendsList">
<ion-item *virtualItem="let friend">
{{friend.name}}
</ion-item>
</ion-list>
</div>
</div>
I created a multi-button screen much like this:
When I click on a button it would have an id and that id I get on its route, I did with list already, but several buttons passing parameter I still can not.
My question is how to pass that button id to another screen.
Avisos.html
<ion-view view-title="Avisos">
<ion-content style="background-color: #FF4500; background-size: cover;
background-position: center;">
<div class="row icon-row">
<div class="col text-center">
<button class="botao button button-positive" id="1">Icon</button>
<br>mais informaçoes
</div>
<div class="col text-center">
<button class="botao button button-positive" id="2">Icon</button>
<br>Avisos
</div>
<div class="col text-center ">
<button class="botao button button-positive" id="3">Icon</button>
<br>Contato
</div>
</div>
</ion-content>
</ion-view>
In that part is where I get the id, How can I get in that part the id of the chosen button? And pass it on side.id?
site.html
<ion-view view-title="Site">
<ion-content>
<ion-list>
<ion-item ng-repeat="site in sites" href="#/app/conteudoDoSite/{{site.id}}">
<span ng-bind-html="site.title"></span><span class="badge badge-assertive">{{site.post_count}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
How to pass parameter to another screen with ionic1 and angular1? Can anybody help me? What I am trying to do is that when the user clicks one of these buttons the id is passed.
I would recommend using ui-sref instead of href in this situation as it allows you to use states instead of paths and also allows you to pass variables to the next view. Here is an example:
<ion-item ng-repeat="site in sites" href="app.conteudoDoSite({id: site.id})">
You also need to make sure that the state you are trying to pass the variable to is configured to receive parameters. Which would look something like this:
.state('app.conteudoDoSite', {
url: '/conteudoDoSite/:id',
templateUrl: '/* Fill in */',
controller: '/* Fill in */'
})
I attempted to guess the state by looking at your code, but please make sure that it is correct, before copying the examples.
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 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:
}