Right now, I am using primeng autocomplete dropdown and in this we don't have functionality of clear/reset.
When i selecting a result from droplist, a clear/reset icon (x) should appears in input and click on (x) it will clear the inputbox.
<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"
[dropdown]="true"></p-autoComplete>
Anyone have any better solution for this.
Just add type=search
<p-autocomplete type="search" ...>
<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)" [dropdown]="true"></p-autoComplete>
<i class="fa fa-reset" (click)="onClear()"></i>
onClear(){
this.text='';
}
You can use PrimeNg Chip. When an option is selected from the dropdown you can display the value in a chip which as a close button on it. This is the cleanest and most visually pleasant way to do it.
Related
I have the following code in my html.
<ion-item (click)="showAddressModal()">
<ion-input [(ngModel)]="address.formattedAddress"
type="text" placeholder="Pick a location for your event">
</ion-input>
</ion-item>
showAddressModal() essentially opens a modal page where the user can search for an address.
Works like charm when I run it on chrome with ionic cordova run browser.
On ioS, however, it takes 2, sometimes 3 clicks to open the modal. First click brings the keyboard up. If I disable the keyboard by using [readonly]="true" on then the keyboard doesn't come up, but I still need 2 clicks. If I disable the entire input using [disabled], it doesn't serve my purpose - cannot click. I have tried moving the (click) from ion-item to ion-input, I have tried removing ion-item altogether, no avail!
Please share your perspective on how I can fix this.
Regards,
J
OK. For now, I've fixed my own problem by removing ion-input altogether and just using ion-text with a (click) listener on it. In lieu of the placeholder, I just show the same placeholder if address.formattedAddress is empty.
Still not sure where the problem is with ion-input and iOS, but will save that problem solving for another day.
For those of you, curious to see the new code, here's what the template code looks like - no change to my component or to the modal itself -
<ion-item (click)="showAddressModal()">
<ion-text inputmode="none">
{{ (address.formattedAddress == "") ? "Pick a location for your event" : address.formattedAddress}}
</ion-text>
</ion-item>
Thanks!
Hi Im creating a checkout form, and I want to add a tooltip for show where to find the CVV of the credit card.
So if the people hover the tooltip then in the popup show an image, is that possible?
Turns out you can add HTML to the title tag. You can add an <img> tag like this:
<span data-tooltip aria-haspopup="true" class="has-tip" title="<img src='http://placehold.it/350x150'> Tooltips are awesome, you should totally use them!">extended information</span>
Here's a working demo.
I have select dropdown (non-native), where I may have only one option. The problem occurs when the dropdowns are dependent on each other, because when I have chosen one from a dropdown, I cannot remove it later.
What I want is functionality similar to what one gets when using (again non-native) multiselect dropdown. I have tried placing a button beside the dropdown menu, but without success.
Anyone with experience regarding similar issues?
Thanks!
Edit:
<div data-role="fieldcontain" style="display: none;" id="subSubSubDiv">
<select name="sub_sub_category" id="sub_sub_sub_category" data-native-menu="false" tabindex="-1">
</select>
</div>
I was wondering - is it possible to apply the jQuery UI CSS to an entire site without having to apply it individually upon elements?
So, for example, instead of having to do:
<input type="button" value="Submit" class="ui-state-default ui-corner-all" />
to all my buttons, I instead have some sort of class applied at at top-level DIV which will change the entire site whenever it can be (any element that jQuery UI can handle). If it's not possible, it's no big deal, but it would be great if it is.
Yes. You can just call
$('button').button()
from your script to select all button elements using jQuery and apply the jQuery UI button theming to them. See, for example, the sample code on the jQuery UI button demo.
I suppose you could apply it on the $(document).ready(function(){$("*").addClass("ui-state-default")});
This is not tested, so don't take my word for it.
I started using the jquery ui library to add some enhanced UI elements to the asp.net app. and have run into a minor bug/problem:
I have a jquery UI dialog that is called when a button is clicked..the text for the dialog is all in a and is normaly hidden from the user, and then the jquery UI does its magic and uses that text to display the dialog - all works perfectly.
Here is the code:
<input type="button" value="Cancel This Event" onclick="$('#myCancelEventDialog').dialog('open');" />
and here is the div:
<div id="myCancelEventDialog" title="Cancel an Event or Meeting">
<p>Are you sure you would like to cancel this event/meeting?</p>
</div>
Question is, everytime my form repaints, the "hidden" text actually flashes onto the page for a split second before it becomes hidden again. (i.e. the "are you sre you would like to cancel this event/meeting text actually is visible for a split second)
Is it possible to prevent this?
I set the style on the div to "display: none". The dialog changes this when it displays.
<div id="myCancelEventDialog"
title="Cancel an Event or Meeting"
style="display: none;">
<p>Are you sure you would like to cancel this event/meeting?</p>
</div>
Set the height on the control to zero. This way it renders to the screen at 0 height? This is somewhat of a guess by the way...
Which browser? Also, you can experiment with CSS visibility by setting display:none and undoing that just before you pop up the dialog.