I am trying to implement typeahead functionality in Angular. I am using ngbTypeahead from ng-bootstrap for this as shown below.
<input id="typeahead-template" type="text" class="form-control form-rounded" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" />
<ng-template #rt let-r="result" let-t="term">
<img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/'+r['flag']" class="mr-1" style="width: 16px">
<ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
</ng-template>
This is displaying result like
result1
result2
result3
but I want a header to be added and the result should be in the format
The results are
result1
result2
result3
Can someone please help with this?
This isn't supported by ng-bootstrap's Typeahead component, however you can use CSS to insert text before the results. The only problem with this solution is that you need to use ::ng-deep which is deprecated and likely to be dropped by Angular soon.
Add this to your component's CSS:
::ng-deep ngb-typeahead-window:before {
content: "The results are:";
}
and you should see the following when results are displayed:
This will prepend the typeahead results with the text specified as the value of the content property.
Please see this StackBlitz for a demo
There is a hack I have been using:
Use the first row as a dummy row with a specific attribute
Track the existence of that attribute to render the header at the template
Use CSS to make the first row unselectable.
.popup-custom-class .dropdown-item:first-of-type {
pointer-events: none;
}
Related
I am trying to bind CSS styling to vuejs tags. I dont seem to be able to get it working.
Below is the code which i am trying. Can anyone help me out with this? I am not able to get the Styling to work. I am trying this as well as binding based on conditional. Both doesnt seem to work. Can anyone help me with this? I have tried all the ways i could find on stackoverflow, none of them seem to work for me. Can any one help me if i am doing something wrong?
<b-table
class="PatientTable"
borderless
hover
v-on:row-clicked="redirectToPatientView"
:items="users"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
id="tableData"
>
<template v-for="key1 in fields" v-slot:[`cell(${key1})`]="{ value }" id="tableData" >
<b class="patientData" id="tableData" v-bind:key="key1" v-bind:style="'{font-size:200px;}'">{{ value }}</b>
</template>
When you bind a style, pass in an object instead of a string of an object.
<!-- Instead of: -->
<b :style="'{font-size:200px;}'">{{ value }}</b>
<!-- Do: -->
<b :style="{ 'font-size' : '200px' }">{{ value }}</b>
Notice that, in the second line, the object is placed directly into the double-quotes, without its own set of single-quotes. The contents of those double-quotes are straight up JavaScript, so you don't have to escape the object in them. What you're essentially trying to do is along these lines:
<b :style="styleBinding">{{ value }}</b>
<script>
export default {
data: function() {
return {
styleBinding: {
'font-size': '200px',
'margin-top': '5em',
'other-css-property': 'value'
}
}
}
}
</script>
It's just that, since you're only using a single property, it's a little cleaner to do in-line in the template.
use :class binding instead?
<component :class="{'your-classname' : condition}">
Since inline styling is not really advisable. https://v2.vuejs.org/v2/guide/class-and-style.html
I have Vuetify code which look like this
<v-radio-group v-model="gender" column class="radio-group-full-width">
<v-radio value="Boy">
<template v-slot:label>
<v-textarea
v-model="answer"
v-validate="'required'"
required
:error-messages="
errors.collect('form-create.answer')
"
label="Answer 1"
data-vv-name="answer"
type="text"
></v-textarea>
</template>
</v-radio>
</v-radio-group>
The Problem is that i want to have the text-area in full width, but the label tag which is generated by vuetify template slot blocks this. Do you have any ideas how i could fix this?
What it looks now
What i want
answer worked for me with a slight modification to the braces:
.radio-full-width >>> label {
width: 100%;
}
How can align items in row/column depending on condition in *ngFor.
If the input type is textarea, then it should be in the next line otherwise on the same line.
html input from json - Stackblitz Demo
what you are trying to do is rather simple, you just need to add an extra class in the div you are iterating through with *ngFor as in:
<div
*ngFor="let prop of objectProps"
[ngClass]="{ 'same-line': prop.type !== 'textarea' }"
>
Then you can use that class to set the element's display to inline-block so that it does not go in the next line as in:
.same-line {
display: inline-block;
width: 50%;
}
(note that I also needed to specify the width as that needs to be known here)
This is the result:
And I you can also see this working in the following fork of your stackblitz demo:
https://stackblitz.com/edit/typeinformationdynamic-i24na7?file=app/dynamic-form.component.ts
I'm trying to write a piece of code in my style.css to select the text "register" inside registration button in order to move it a bit higher inside the button.(see following screenshot)
I googled but didn't find a solution how to select such specific value inside a css class or css id.
Please see below. Be aware though that CSS needs to be changed when you change the value of the button. It might be better to define an additional class that will be assigned conditionally.
Check MDN for more information
input[value="register"] {
background-color: red;
color: white;
}
<input type="submit" value="register">
the following code doesn't change the color of that text :
.ihc-register-10 .iump-submit-form input[value="regsiter"] {
color:red;
}
also I don't know what is the correct for of writing
input type="submit" value="register"
in front of class name :
.ihc-register-10 .iump-submit-form
which one of the following is correct ?
.ihc-register-10 .iump-submit-form <input type="submit" value="register">
or
.ihc-register-10 .iump-submit-form input [type="submit"][value="register"]
Strange one,
im trying to apply a style to a textbox that is already using jquery autocomplete, the style im trying to apply doe not work, any ideas?
CSS
#LongTextbox {
width: 250px;
}
HTML
<input name="ItemEntry_item_${id}" type="text" value="${item}" id="ItemEntry_item_${id}" class="LongTextBox"/>
Debug shows
<input name="ItemEntry_item_1" type="text" value="" id="ItemEntry_item_1" class="LongTextBox ui-autocomplete-input" autocomplete="off">
CSS debug shows no sign of LongTextBox being consumed
Your HTML has a class of LongTextBox (capital B) whereas your CSS is targeting an id of LongTextbox (lowercase b).
change CSS to .LongTextBox instead of #LongTextbox
fiddle: http://jsfiddle.net/6Wgxc/
Change your CSS as below. In CSS class is denoted with . and id is denoted by #, further in your CSS code the class name LongTextBox is mentioned as LongTextbox
CSS
.LongTextBox {
width: 250px;
}