I am new to using ng-select. I am using ng-select v7.0 "#ng-select/ng-select": "^7.0.0" and angular version 12. Trying to enable searchable in ng-select but it doesnt seem to be working. Can anyone suggest what should be done to make it work?
I am expecting a filter container i.e a input box with lens icon to filter the value. is this possible with ng-select?
<ng-select
[items]="options"
[virtualScroll]="true"
[(ngModel)]="value"
(change)="onValueChange()"
[placeholder]="placeholderText"
[disabled]="disabled || readonly"
[virtualScroll]="true"
[searchable]="true"
bindValue=""
>
</ng-select>
thanks
Related
I have used 'react-collapsible' library to implement collapsible feature.
<Collapsible trigger = "MyData" className = "addcss" >
<p>I am the content.<p>
<Collapsible />
I need to style the header-MyData when it's clicked differently inside a css. I tried with .collapsible__trigger but it changes the view for both.
I need to change css for .collapse__trigger isopen.
How do I do that?
Thanks!
Working with PrimeNg with the current version 8.0.2 I'm experiencing layout problems with the searchbox inside a listbox. Apparently this was resolved in 3077.
I've created a stackblitz example so you can see it.
The html code is:
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name"
[listStyle]="{'max-height':'150px', 'width':'300px'}">
<p-header>
Cities
</p-header>
</p-listbox>
Is the bug back? Am I missing something?
Thanks for your help!
As seen in the documentation, the problem is mixing the properties [style] and [listStyle].
style - Inline style of the container.
styleClass - Style class of the container.
listStyle - Inline style of the list element
.
So the inline style should be splited in 2 different attributes:
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name"
[listStyle]="{'max-height':'150px'}"
[style]="{'width':'300px'}">
<p-header>
Cities
</p-header>
</p-listbox>
I'm using NgbTypeahead, and it's working properly. But instead of creating a dynamic popup window with the results, I'd like to show the results in a list in DIV.
I think I'm supposed to use the container property to do this, but I've this:
<input #quickSearch id="typeahead-template" type="text" class="form-control popup-search"
[ngbTypeahead]="searchWithTemplate" [resultTemplate]="searchResultsTemplate"
(selectItem)="searchResultSelected($event)" [container]="resultsContainer"
[inputFormatter]="formatter" [placement]="'bottom-left'"
[placeholder]="isSearchInitialized ? 'Search for...' : 'Please wait... initializing quick search...'"
[disabled]="!isSearchInitialized"
style="width:100%">
and it doesn't work. Help appreciated.
Maybe I'm stating the obvious but the docs say it only supports body
A selector specifying the element the tooltip should be appended to. Currently only supports "body".
I'm trying to implement ng2-completer component in my Angular2 application.
The conponent works properly but the style of the search textbox is flat...
I want to have the same style of bootstrap components, like textbox for example.
This is the code:
<ng2-completer [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
This is the rendered control:
As you can see, the list of color is ok but the input where the user write the value to search is completely flat...
How can I move to fix the problem ?
Basically I just want to set it like the field "Titolo" on the right.
Thanks
Just add [inputClass]="['form-control']" in the selector.
For example:
<ng2-completer [inputClass]="['form-control']" [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
Note: form-control is here a class of Bootstrap
put class="form-control" to your textbox ,(class)="form-control" in your case i guess
I am working on adding custom CSS styling for my checkboxes via Awesome Bootstrap Checkboxes and have them actually showing up in the grids with them initially being checked or unchecked properly via JSON data being read...
the issue is when I go to change the value. The values are updating properly from when shown to when hidden.
However, instead of just the checkmark disappearing in the checkbox, the entire checkbox disappears and the only way for me to get it back is to change the value of the back to ui-grid-cell-focus manually through F12 debugger in the browser.
It appears something is not set up right with them, but I haven't been able to pinpoint exactly what he issue is yet...any help would be appreciated.
Cell Template:
cellTemplate:
`<!-- .blueCheckbox --> <div class="checkbox checkbox-primary"> <input type="checkbox" class="ng-scope" value="true" name="select_item" ng-model="row.entity.Name" /> <label></label> </div> <!-- end .blueCheckbox -->,`
Got them working...Had to enable the checkboxes and move them underneath the overlay and they worked fine...weird because its totally different from how it normally works...