Is it possible to put the angular ui typeahead results in a separate div on the page instead of the default. I have seen this SO post AngularJS typeahead search results in a div but wondering if anybody have already tried this.
Search for $document.find('body').append($popup); in the typeahead.js.
If the typeahead-append-to-body attribute that is by default set to False changes to True, the result will be append to the <body>
<input type="text" typeahead-append-to-body="true">
If you change the $document.find('body').append($popup); to something like $document.find('#myElement').append($popup); , the result will be append to the element with id #myElement.
You can define your attribute , something like typeahead-append-to-myElement
Related
I'm creating an input component and I want to pass a required property in, based on a boolean from the parent component
#Parent component
<Input
:required="false"
/>
#Child component
<input
#input="event => $emit('update:value', event.target.value)"
:required="required"
/>
The problem is, when the required from the parent component is false, it still puts required into the html (which the browser reads as required).
How can I achieve this?
Thanks
Mark
For VueJs 2 or earlier version you can use
<input :required="test ? true : false">
in VueJs 3 you have to use the null to prevent the rendering of the attribute in html tag.
<input :required="test ? true : null">
VueJS conditionally add an attribute for an element
You should explain more. I provide a situation as you describe in stackblitz where I link it here. It works and it is a simple form with submit when you change the required value in App.vue you could see the input element in HelloWorld.vue is changing in the inspector. Hope you find it usefull.
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 using simple form and bootstrap with my rails 4 app.
I'm becoming so frustrated with this that I just can't figure out something that should be 'simple'.
I am trying to make my radio buttons display:block. Instead, the text is all inline and squished up on top of each other because the container is too narrow to fit it all in on one line.
My form element is:
<%= f.collection_radio_buttons :public, [[true, 'Yes, anyone can view this project'] ,[false, 'No, I would like to invite specific recipients']], :first, :last, {style:'display:block', class: "response-project"} %>
I have also tried:
Neither of these work to disable the formatting that either Simple Form or Bootstrap is imposing. I have other form elements that are radio buttons that I want to remain display:inline. I can see from my google inspect element, that there is a label.collection_radio_buttons tag on the form element. I didn't create that and I can't find it anywhere in the css files. it might be an import from bootstrap or a part of the simple form styling but I don't know how to disarm it from my form element.
Can anyone help?
Thank you
If you want your CSS to work you have to user input_html or label_html.
So it would be something like this:
<%= f.collection_radio_buttons :public, [[true, 'Yes, anyone can view this project'] ,[false, 'No, I would like to invite specific recipients']], :first, :last, :input_html => {style:'display:block', class: "response-project"} %>
*label_html is to affect only the label div
Anyway you should read the doc https://github.com/plataformatec/simple_form under the 'Usage' section. Hope this helps.
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?