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.
Related
Assuming the following HTML:
<div *nfFor="let option of options" (click)="option.check = !option.check; selectionChanged.emit(option)">
<input type="radio" [(ngModel)]="option.check" (ngModelChange)="selectionChanged.emit(option)"/>
...additional elements related to input
</div>
I want to prevent the event from being emitted twice when clicked on the div instead of directly on the input. As far as I know the click is only registered once, if clicked directly on the input it'll fire that but if clicked outside of the input but within the div it'll execute the (click) statement.
So anyway the question is wether there will be two emits on selectionChanged when clicked on the div as there's also an ngModelChange on the input element itself. Does ngModelChange recognize changes on the ngModel bound property from outside the element it is attached to and therefore fire?
NOTE: I know the radio button has two event bindings which isn't the right way to go about things in Angular (I think, two chefs in the kitchen?) but that's something i'll fix later if necessary
Here is my current code:
<select [(ngModel)]="items">
<option *ngFor="let item of items" [ngValue]="item " {{item .symbol}} : {{item.companyName}}</option>
</select>
The problem is this is a dropdown that is not fully expanded by default. My goal is to have this list act similar to how Google has their search; A fully expanded list that updates based on the input.
I have the binding correct, but I can't seem to get the HTML correct to where it's always expanded and there is no empty entry for the first element.
Are the Select/Option tags the incorrect tags to use?
I can't find any other tags to use. Anything in Angular?
I don't know if natively you can have this feature inside a browser. But you can write one component to do this job. Basically, it'll have two parts, one input, and one panel with some help via Bootstrap.
<input type="text" class="form-control input-xs">
<ul class="dropdown-menu"></ul>
When you type in anything in the input, you can make the list of items displayed. After you select one item, the list can disappear. In terms of style, it'll be very similar to http://getbootstrap.com/docs/3.3/javascript/#dropdowns
Then you can wrap up everything inside an angular component. I know it's a long answer.
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.
I am using Ionic 2.
I have a list of items, where I use <ion-item-options>. They work perfectly as documented here.
When a user slides the item to the left, the options are exposed.
Question
Is it possible to add that when the user long presses on the item, it also exposes the options?
Thanks
<ion-list>
<ion-item-sliding...
<ion-item...
.........
</ion-item>
<ion-buttons>
<button light (click)="alert('todo')"><ion-icon class="ion-ios-heart"></ion-icon>Favourite</button>
</ion-buttons>
</ion-item-sliding>
</ion-list>
The longer press (as said by it's name) can be called on by using (press) instead of (click). This way you can call a function when the ion-item has been pressed and toggle a boolean.
Next in your ion-item-options you can set an *ngIf="yourBoolean" and your options will be toggled
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...