I have validation for 2 fields which are country code and actual mobile number. I have attached screenshot. When correct country code is given and invalid mobile no is given at that time correct tick glyphicon for country code and cross glyphicon comes which overlaps on each other. I need to remove glyphicon for country code by using css or js. Any help will be appreciated.
If you're using jQuery:
let's say you have
<div class="container">
<div class="form">
form content...
</div>
</div>
you would call:
$('.container form .glyphicon').each(function(i){ // your target input id or class should be placed between 'form' and '.glyphicon' eg: $('.container form input[name=state_code] .glyphicon')
if (i!=0) $(this).remove();
});
this way you get rid of the additional Xes appearing when you don't need.
I have found the answer. I have done it by using jQuery.
My actual HTML was as below,
<div class="input-group">
<div class="input-group-addon">+</div>
<input type="tel" maxlength="3" class="form-control pull-left" id="CountryCode" name="CountryCode" placeholder="Code">
<input data-bv-field="Mobile" type="text" id="Mobile" name="Mobile" class="form-control">
</div>
Bootstrap creates glyphicons for correct and wrong below the html as below,
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="CountryCode" style=""></i>
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="Mobile" style=""></i>
So I have added following one line code to remove correct and wrong glyphicons for country code field,
$("#CountryCode").parent().next().removeClass('glyphicon-ok glyphicon-remove');
Related
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.
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>
I'm building a website to let users design their own mobile app. One side of the website has a form that the user fills out, and the other side has a live preview of the app based off of the form data. This is how it is set up:
Controller:
$scope.primaryColor = "#325490";
Form Input:
<!-- Primary Color -->
<div class="form-group">
<label for="primaryColor" class="col-sm-2 control-label">Primary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="$parent.primaryColor">
</div>
</div>
Live Preview:
<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color':'{{$parent.primaryColor}}'}">
I have to use $parent because I am using ng-include on my index page to include the form.htm and preview.htm files. I have tested the form and I know it is changing all of the scope variables that I have, but the previewer is not changing. Any help is appreciated!
Remove {{}} and '' and it should work, like this:
<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color': $parent.primaryColor }">
I want to apply css style(link is below) to my Django boolean form in my template.
https://proto.io/freebies/onoff/
I did something like this. The style is applied to the checkbox but the checkbox doesn't change status 'OFF' to 'ON'. (when I click it, it would not do anything)
Template
<div class="onoffswitch">
<span class="onoffswitch-checkbox" id="myonoffswitch" checked>{{form.mixed_load}}</span>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Forms.py
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch'}))
Can someone tell me how to apply css style to Django form more effectively?
Thank you
You need to replace your code to look like this in your forms.py:
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch','id': 'myonoffswitch'}))
You were missing id attribute, which is used in the for attribute of label tag. See this answer for in-depth explanation what is the for tag for, and why do you need to set id on your input field.
However I can recommend you using django-widget-tweaks, which is really nice and easy to use.
Full working code:
Make sure you have css styles applied to the template file.
# template
...
<div class="onoffswitch">
{{ form.mixed_load }}
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
...
# forms.py
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch-checkbox','id': 'myonoffswitch'}))
This way is one of proposed ways to customize widget look.