I followed the solution on this link to have my input field filter options in the datalist using contains instead of starts with. The solution works but I have a problem with the display. The options shows both the "value" and the "innerText" on the options list as shown below:
What I wanted to do is to make the first line smaller and the second line bigger but I am not sure if this is possible and what element should I style for this.
Here's the html code that I have:
<div class="inputFieldBorder item item-input">
<div class="row">
<input type="text"
name="prodList"
id= "prodList"
maxlength = "50"
placeholder = "Things to Buy"
ng-model="listData.header.newProduct"
list="productlist">
<datalist id="productlist">
<select >
<option ng-repeat="productname in allproducts" value="{{productname.productName}}">{{productname.productName}}</option>
</select>
</datalist>
<button ng-disabled="!listData.header.newProduct"
class="button button-icon ion-android-close input-button"
ng-click="clearSelection()"></button>
</div>
</div>
Related
I've been trying to figure out the way to hide every 'label' element in the html below except the first one. I've got a repeater field that adds a row with a dropdown select field and a label.
Each new row adds the select field and the label. The label id starts with 'label-repeat- ' and the suffix is dynamically generated based on the number of repeater rows, so it goes: 'label-repeat-1', 'label-repeat-2', 'label-repeat-3' etc.
The issue is that each repeater row is separately wrapped into its own div, so I'm guessing I cannot use :not(:first-child) in the case.
Here is my fiddle and below is my html:
<div class="fieldset">
<div class="status">
<label id="label-repeat-1" class="label-repeater">Status</label>
<select id="field-repeat-1" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
<div class="fieldset">
<div class="status">
<label id="label-repeat-2" class="label-repeater">Status</label>
<select id="field-repeat-2" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
<div class="fieldset">
<div class="status">
<label id="label-repeat-3" class="label-repeater">Status</label>
<select id="field-repeat-3" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
I've been trying to use the wildcard selector to select the label with label[id^='label-repeat-'], label[id*=' label-repeat-'] which works fine, but then I'm trying to add the :nth-of-type(n+2) pseudo class to select every label except the first one and hide it, but that doesn't seem to work.
label[id^='label-repeat-']:nth-of-type(n+2),
label[id*=' label-repeat-']:nth-of-type(n+2) {
display: none !important;
}
Is there any other way to do this with CSS? Or even jQuery?
If I understand, you want to hide all except for the first label. So, you would end up with a label and 3 select boxes under it? Using the "plus" combinator in CSS is the easiest way of saying "all but the first one"...
.fieldset + .fieldset label {
display:none;
}
This rule is saying any fieldset that is followed by another fieldset (all but the first one), then the nested label under those.
As said, I am trying to dynamically show or hide a Div using *ngIf in Angular 9 based on the value selected from dynamically generated drop down with static options.
I am very new to Angular and I directly jumped to Angular 9. I have been working on a model webapp just to see if I can get the hang of the tech.
I have a page that renders div rows based on the number of JSON objects.
Each row is an accordion in itself and each expanded accordion will in turn have 2-3 rows. In the expanded accordion I have dynamically generated a dropdown on a column.
Based on the drop down selection I need to show/hide a div in the other column on same expanded accordion.
Please do not give me a long route by using a event and a method defined in Typescript, I mean please pour in solutions but I am looking to come through this problem in the HTML page itself.
As of now the webapp has only one JSON object in the name "incidents", this is how iterate them
<div class="card" *ngIf='incidents && incidents.length' >
<div *ngFor = 'let incident of incidents ; let rowIndex = index'>
In the expanded Accordion am trying to achieve this.
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="'fixType' + rowIndex">Type of Fix </label>
<select id="'fixType' + rowIndex" class="form-control">
<option selected>{{incident.TypeOfFix}}</option>
<option value="1">Data Fix</option>
<option value="2">Code Fix</option>
<option value="3">User Education</option>
<option value="4">Work Around</option>
<option value="5">User Creation</option>
<option value="6">Configuration Changes</option>
<option value="7">Document Issue</option>
<option value="8">SP/Script Changes</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="'EstClsDt' + rowIndex">Estimated Closure Date</label>
<div class="input-group">
<input #dp [id]="'EstClsDt' + rowIndex" class="form-control" placeholder="Estimated Closure Date"
[value]="incident.EstimatedClosureDT" [(ngModel)]="model" container="body" ngbDatepicker
#d1="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d1.toggle()" type="button"></button>
</div>
</div>
</div>
</div>
<div class="col-md-4" *ngIf="incident.TypeOfFix == 'Code Fix' || 'fixType' + rowIndex === '2' ">
<div class="form-group">
<label for="'DepDt' + rowIndex">Deployment Date</label>
<div class="input-group">
<input #dp1 [id]="'DepDt' + rowIndex" class="form-control" placeholder="Estimated Closure Date"
[value]="incident.EstimatedClosureDT" [(ngModel)]="model" container="body" ngbDatepicker
#d2="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d2.toggle()" type="button"></button>
</div>
</div>
</div>
</div>
</div>
<div class = "col-md-4" *ngIf = "incident.TypeOfFix == 'Code Fix'">
This line is working and div is hidden/shown based on the value returned from the JSON object but when trying to show/hide the div in the runtime with the help of below line.
I would need the correct version for the below line. There is no particular error thrown but the webapp does not react when I change the value of the drop down and div is neither shown nor hidden during runtime. I searched Online and people os different forums are suggesting to use ngModel or ngModule but if someone can help me with a clear syntax it would be great.
<div class="form-group" *ngIf = "'fixType' + rowIndex == '2' " >
Hope I have detailed enough, Please HELP.
Thanks.
I have this html:
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
I want to place the label Where? before location and What? before keywords using css.
Tried:
label[What?]:before {
content: "search_location";
color: green;
}
Didn't work.
At the moment the label location listed in my html shows up as a placeholder, not a label- likewise for the label search keywords This is fine but i would like those placeholders replacing with, for location London, Berlin, Bristol... and for search keywords Chef, Cleaner, Manager...
It's perhaps clearer if you view at: https://adsler.co.uk/jobs/
Couldn't you just place the label with html? Like this
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label style="color: green;">What?</label>
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label style="color: green;">Where?</label>
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
Based on the HTML snippet you've provided, your CSS selector label[What?]:before is not going to resolve to anything. Square brackets [] are used to select elements based on one of their attributes (see attribute selector definition). You appear to be trying to pass in a desired value (which doesn't exist yet) as an attribute selector, which is impossible.
Looking at the site, the other trouble you're having is that the labels themselves have been hidden. This is currently in your CSS, so will need to be changed or otherwise overridden:
.job_filters .search_jobs div label {
display: none;
}
Then, as already suggested by Mr Lister, something like this will get you on the right track. I've tested in the browser on your site and it works once the labels have been unhidden:
label[for="search_location"]:before {
content: "Where?";
}
label[for="search_keywords"]:before {
content: "What?";
}
I'm going to assume that your actual intention is for the labels to display but you want to change their existing values from "Keywords" and "Location" using only CSS? It's not achievable. You could use a bit of JavaScript to change the text content, but not by CSS with your current implementation.
Tried to insert a "select" component under a tab. Basically, the tab just displays some dynamic forms. The select is a list of string for user selection Looks like my definition is correct. Do not know why it messed up the whole angular/clarity UI page.
<clr-tab>
<button clrTabLink>Submission Form</button>
<clr-tab-content>
<br>
<label class="required" for="uniqueCertIDs">Unique Cert IDs</label>
<div class="select">
<select id="partnercertIDs" formControlName="EEPortalProductDetails">
<option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId">{{ucertID.UniqueCertId}} </option>
</select>
</div>
Very likely, the scope of the select portion is not correct. Failed finding related documentation.
It's difficult to say whats happening without a running example.
I created a simple form with a select in a tab and it seems to be ok.
Here is the template code for my tabs:
<clr-tabs>
<clr-tab>
<button clrTabLink id="link1">Tab1</button>
<clr-tab-content id="content1" *clrIfActive>
<h3>Form 1</h3>
<form>
<div class="form-group">
<label for="selects_1">This is a select box</label>
<div class="select">
<select id="selects_1">
<option>Select</option>
<option *ngFor="let user of users" [value]="user">{{user}} </option>
</select>
</div>
</div>
</form>
</clr-tab-content>
</clr-tab>
</clr-tabs>
You can see this running here: https://stackblitz.com/edit/so-tabs-form-select
If this doesn't solve your issue, can you fork the StackBlitz and recreate it there?
<form [formGroup]="partnersForm" >
<div class="form-group">
<label class="required" for="selects_1">Unique Cert IDs</label>
<div class="select" >
<select id="selects_1" formControlName="partnerFormCertIDs" ng-change="selectAction()">
<option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId" >{{ucertID.UniqueCertId}}</option>
</select>
</div>
</div>
</form>
and in my Session.ts file. Debug using console, the alert never shows up
selectAction() {
alert("selected value changed !!!!");
}
#nextgen-ui Regarding your second issue, the data binding syntax should be either on-change or (change); ng-change is an AngularJS directive.
Please see this Stackblitz.
#Jose Gomes
The event is defined as updateCertData()
<form [formGroup]="partnersForm" >
<div class="form-group">
<label class="required" for="selects_1">Unique Cert IDs</label>
<div class="select">
<select id="selects_1" formControlName="partnerFormCertIDs" (change)="updateCertData()">
<option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId">{{ucertID.UniqueCertId}}</option>
</select>
</div>
</div>
</form>
And I defined a POST API in the event
updateCertData(){
let selectedCertID = this.partnersForm.get('partnerFormCertIDs').value;
for ( let partnerInfo of this.uniquecertIDs) {
if(partnerInfo.UniqueCertId == selectedCertID){
this.extractSubmit(this.cert);
this.submit[0].Option[0].value = partnerInfo.ProductId;
this.submit[0].Option[1].value = partnerInfo.ProductName;
this.certsService.setSubmissionProduct(this.certId, this.submit);
break;
}
}
}
this.certsService.setSubmissionProduct is a POST API, sending data back to UI Server
setSubmissionProduct(sessionId: string, info:any){
let body = {'submitConfig': info};
let url = GLOBALS.baseUrl + "session/" + sessionId + "/submitproduct";
return this.post(url, body);
}
The this.post never sends message to the controller successfully. I tried several other post methods, which works well in other logic part, but never sends message successfully if it is put within this "change" event.
When I was reading the documentation in Material Design Lite's official page, no class name is mentioned for the fixed label with a textbox. In case of textarea they have a solution. But same code like the following one is creating only placeholder instead of a label for input type = "text".
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample5">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
I haven't seen this documented anywhere but it was annoying me so I delved into the SCSS to see what I could do. No changes to CSS are required. I managed to solve it by doing the following:
Add the mdl-textfield--floating-label has-placeholder classes to the outer <div> element.
Add a placeholder attribute to the <input> element, it can contain a value or remain empty; either way it will still work.
This will force the label to float above the input, instead of acting as a placeholder.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
<input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>