I am using ionic 3. I am trying to do a list of events where the event name is on the left side and the event note (the start time) is on the right side of the item in an ion-note. Here is my code:
<ion-list *ngIf="events.length !== 0">
<ion-item-group>
<ion-item-divider>
Upcoming events
</ion-item-divider>
<button ion-item *ngFor="let event of events" (click)="itemTapped($event, event)">
{{event.name}}
<ion-note item-right>{{event.start | date: 'HH:mm'}}</ion-note>
</button>
</ion-item-group>
</ion-list>
If I do just that, the note gets displayed on the right properly, however the primary text (the event's name) gets chopped off with an ellipsis inserted in the end, even though it would fit just fine. Here's a picture:
I have checked the documentation on ionic's website, and I copied over the demo source from here: https://github.com/ionic-team/ionic/blob/master/demos/src/list/pages/page-one/page-one.html
Funny enough, it looks good in their showcase but pasted into my application it looks just as off as my example.
The question is: how do I make ionic not cut off the primary text in my list?
Thanks.
**UPDATE: **I have found the solution. I have added a css rule (min-width:75%) for ion-notes in an scss associated with a different page, but that somehow got applied to this page as well. Removing that CSS rule fixed the issue for me.
In your code you're using item-right class, however in the documentation as well as the demo source page, it is item-end.
Please check the item placement attributes here:
https://ionicframework.com/docs/api/components/item/Item/
If that doesn't help, you can try overriding the padding-right attribute of item-content.
Related
I have an angular project I am developing using angular material for a slide toggle and text fields, and cdk drag and drop for drag and drop functionality. I am pretty new to angular libraries and angular in general.
I have run into an issue where the slide toggle is only toggling the first element inside an *ngFor loop. I have tried adding a let i = index to the ngFor and it is always passed as 0 no matter which toggle you select, however if I place {{ i }}, it will show up as the correct index. I am at a loss.
https://stackblitz.com/edit/angular-yezv9a
If you go to the project at that link, and toggle the test 2 or 3 toggle, it will shift the first 1 and I can not seem to figure out why
Any help is appreciated
If I understand you correctly, There is one issue in your code is mat-slide-toggle element has an id which is repeating in ngFor
<mat-slide-toggle id="toggle" color="primary" (change)="onToggle(button)" [checked]="button.enabled"></mat-slide-toggle>
I removed the id attribute and found working correctly, based on my understanding you can find a fork of working example in below url
https://angular-yezv9a-bac1jz.stackblitz.io/
Make the id attribute as empty
Will work as expected
i have an issue within my Angular7 application using the NguCarousel (uses HammerJS).
The carousel works as intended for displaying complex elements, until I add a html-select element in the carousel items.
Problem:
When clicking the select the whole carousel becomes draggable in Firefox.
This can be seen when editing this demo a bit.
In simple.component.html replace in row 3 {{item}} with <select></select>
Already tried the following things:
change framework: I have seen the same behaviour in swiper-framework (therefore probably not really framework related)
stop the event propagation with <select (click)="$event.stopPropagation()"> but that didn't help.
css touch-action: none one select
What else can i try?
Best regards
Terry
Edit: Still having this issue. A hint/idea would be splendid!
HammerJS uses pointerdown event to catch the start of dragging process.
So, that's probable what you wanted to stop from being propagated.
<select (pointerdown)="$event.stopPropagation()">
Forked Stackblitz
I have created a dialog with a list of options(users) which can be selected, using mat-selection-list. I have a use case where I should disable the list of already selected users from getting selected/clicked again.
So, I get the selected users from the event, add a flag to know if the user has already been selected or not, and disable the mat-list-option based on the returned boolean value from the flag which I have. Here is the code for that.
<mat-selection-list
#listItem
(selectionChange)="handleSelection($event, listItem.selectedOptions)">
<mat-list-option
*ngFor="let item of filteredArray"
[value]="item"
[disabled]="item.isSelected">
{{getDisplayValue(item)}}
<mat-divider></mat-divider>
</mat-list-option>
</mat-selection-list>
Now, the problem is, I want to show a tick mark for the already selected users as well since mat-list-option has a mat-checkbox child element.
So when i disable the mat-list-option(parent) , it also adds class mat-psuedo-checkbox-disabled to the checkbox(child) as well. I want to prevent this from happening.
Or suggest me an efficient way to override the mat-checkbox class and add checked class to it, even if the mat-list-option has disabled class added to it.
Any help is appreciated, Thanks.
UPDATE:
Solved it by adding mat-list-option selected property to that. How stupid was i to miss that.Lol.
<mat-list-option *ngFor="let item of filteredArray" [value]="item" [disabled]="item.isSelected" [selected]="item.isSelected">
Able to solve this with a help of my colleague.
i wasn't looking at the right place.
I have an ion-textarea inside of ion-item. It's shows fine, but when I press over the textarea, it's shows and hides the keyboard. And because the keyboard is hidden, I cannot put any text.
It's like that onblur event was triggered inmediatly after that I touched screen.
This is my code:
<ion-item>
<ion-label stacked>Comment</ion-label>
<ion-textarea [(ngModel)]="formData.comment" name="comment" placeholder="Put any comment..."></ion-textarea>
</ion-item>
Any ideas?
You will often run into errors like this whenever using ion-item in that manner. I had the same thing happen with inputs until I just wrapped them in a div instead.
Per the docs - An item can contain text, images, and anything else. Generally it is placed in a list with other items. It can easily be swiped, deleted, reordered, edited, and more. An item is only required to be in a List if manipulating the item via gestures is required. It requires an ItemSliding wrapper element in order to be swiped.
You may want to restructure your code or format that ion-item in a list of some sort.
In my AngularJS project I have an account details page where you can change your personal account information. This page allows for multiple phone numbers and e-mailaddresses to be supplied. Using mouse input (or tabbing to buttons and pressing them with space bar) works perfectly, however I'd like to add the convenience of the enter key pressing the 'logical' buttons.
My form looks like (accidentally forgot to translate a few items):
A simplified version of the HTML for the form can be found on PasteBin, I've mainly removed the directives for managing the lists.
All buttons are <button> elements except for the cancel button which an <a> to the previous page, and the submit button is <button type="submit">.
When selecting any text box and pressing enter, the first (non-disabled) <button> element is 'clicked'. Meaning if I would change the last name, hit enter, the first phone number would be removed.
When you're in a new entry of phone numbers or e-mailaddresses (the row with the green + button) it should click that button, and if it's disabled do nothing.
When you're in any other text box on the form it should hit the save button, and also if the save button's disabled, do nothing.
Both buttons will be disabled based on form validation.
There'd be no trouble in changing the type of a button from button to submit if that'd help.
I would preferably have an all HTML solution, using just semantics, but I doubt that's really possible. So the logical alternative would be to use an AngularJS directive.
Please do not provide a jQuery or plain JavaScript solution relying on IDs or something like that. I don't want to hack my way around AngularJS, rather embrace it.
In the meantime I've worked on a directive that allows me to declare what I've called 'submit scopes'.
In essence you have actions (inputs) and targets (buttons), they're bound through a service by a key you can assign in the template. To avoid keys from clashing and from simple annoying work you can create a submit-scope which will cause it's children to prepend a unique key to the value they're accessing.
Within a submit-scope you can still override an action to use a global key instead by setting the attribute global-submit="true".
Example code:
<div submit-scope>
<input type="text" submit-action />
<button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>
You can view the entire source code and a slightly larger example on Plnkr.
I just tried to replace
<button>Cancel</button>
with
<input type="button" value="Cancel">
and it seems to work correctly...