Please advice how to implement password strength meter with Semantic UI progress bar?
<div class="ui left icon input">
<input type="password" class="form-control" name="password" id="password" placeholder="">
<i class="icon-lock teal icon"></i>
</div>
<div class="ui bottom attached progress">
<div class="bar">
</div>
</div>
Tutsplus has an awesome tutorial to calculate password strength using JavaScript which you can find here.
The tutorial will give you a score out of 100. Use this score to populate the progress bar in Semantic UI like this:
$('.progress').progress({
percent: score
});
Related
I'm making a form in React native.
A field in this form in (non-native) React would be like this:
<div>
<label htmlFor="lastName">Last Name:</label>
<input type="text" id="lastName" />
</div>
Or in plain html:
<div>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName">
</div>
I find the label tag important for accessibility reasons.
Every tutorial I found uses only placeholders and I couldn't find any reference for <label> in the react native documentation.
The placeholder disappears as the user starts typing, which makes the page less accessible.
The <label> tag also has the advantage of directing focus to the input in case it is clicked.
This means a click on <label htmlFor="lastName">Last Name:</label> prompts the user to input in the field <input type="text" id="lastName" />.
For this reason using <Text> tag as a <label> is not ideal.
You can use <View> as your <div> and <Text> as your <label>.
<input> is <TextInput>
then you just have to style the elements to your needs.
In vuejs 2 app using vee-validate ^3.4.14 I have several inputs on modal form of fixed height.
On validation errors I got validation error messages below of inputs, as I have layout like :
<div class="form-group">
<ValidationProvider
name="password_confirmation"
rules="required"
v-slot="{ errors }"
>
<div class="input-group">
<input type="password"
v-model="password_confirmation"
id="password_confirmation"
name="password_confirmation"
class="form-control editable_field"
placeholder="Password confirmation"
autocomplete=off
ref="password"
>
</div>
<p class="error">{{ errors[0] }}</p>
</ValidationProvider>
</div>
But these messages break layout of modal form, as height of modal form is increased and elements
on bottom of the form are hidden. If there is a way to show these errors in some other way ?
Say a) select input with “error_border” class and b) show some tooltip message near with any input with error text?
Thanks in advance!
I am using Materialize, and I need to align a button to the right side of the card in the card-action.
This is the code:
<div class="card-action">
This is a link
</div>
This is the result:
If I remove the class="right" then I get this result:
I want the result from the second image, except the button should be aligned to the right. Am I missing something about the materialize card-action? How should I get this behavior?
It should be right-align instead of right and you've to use it on card-action div. You can check about the alignment classes in Helper page of the documentation.
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
require little markup to use effectively.</p>
</div>
<div class="card-action right-align">
<a class="btn blue" href="#">Right</a>
</div>
</div>
</div>
</div>
You Just Need to Mention the Alignement in below way
<div class="card-action right-align">
YOUR CONTENT WILL ALIGHT TO RIGHT
</div>
I am developing an Angular 4 application using ngx-bootstrap modals heavily. I am currently using the template + modalService way of opening up modals. During a click event, this line of code is called:
#ViewChild() worklistTemplate;
// ...
this.modalRef = this.modalService.show(this.worklistTemplate, this.config);
And the worklist template looks like this:
<ng-template #worklistTemplate>
<app-action-view
[leftButtons]="leftButtons"
[labelHeader]="modalHeader"
[labelIcon]="modalIcon"
[modalRef]="modalRef">
<div class="row modal-info-panel">
<div class="col-xs-4 modal-user-info">
<fa name="mars" class="gender-icon"></fa>
<div class="field-panel">
<input type="text"
[ngModel]="rowInfo.lastName"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
<input type="text"
[ngModel]="rowInfo.firstName"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
<div>
<label for="modal-mrn">MRN --</label>
<input id="modal-mrn" type="text"
[ngModel]="rowInfo.mrn"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
</div>
<div>
<label for="modal-dob">DOB --</label>
<input id="modal-dob" type="text"
[ngModel]="rowInfo.birthDate"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
</div>
<div class="edit-panel">
<fa *ngIf=modalFieldsEditable class="worklist-edit-buttons green-hover link" name="floppy-o" tooltip="Save" (click)=saveChanges()></fa>
<fa *ngIf=modalFieldsEditable class="worklist-edit-buttons red-hover link" name="times" tooltip="Cancel" (click)=toggleModalFields()></fa>
</div>
</div>
</div>
<div class="col-xs-8 modal-id-info">
Associated ID
<div class="full-width">
<div class="row" *ngFor="let i of rowInfo.associatedIDs">
<div class="col-xs-6 cell">{{i.id}}</div><div class="col-xs-6 cell">{{i.source}}</div>
</div>
</div>
</div>
</div>
<div class="row" id="modal-table">
<app-table-view
[columns]="objDetailsCols"
[tableData]="objDetailsData"
[expandTemplate]="rowImageContainer"
[expandColStyle]="expandColStyle">
</app-table-view>
</div>
<div *ngIf="resolvePanelVisible" class="resolve-panel"
[#slideRight]>
<div class="resolve-label">
<fa class="lt-icon" name="wrench"></fa>
Resolve QA Issue
</div>
<div class="resolve-body">
Hello, World!
</div>
<div class="resolve-footer">
<a>Validate</a>
<a>Resolve</a>
<a>Reload</a>
<a (click)="toggleResolvePanel()">Close</a>
</div>
</div>
</app-action-view>
</ng-template>
The modal can be closed by clicking outside of the modal boundaries or there is a button inside the ActionViewComponent that calls modalRef.hide().
Memory usage increases drastically as more and more modals are opened. In fact, if I open the modal around 5 times, the application becomes sluggish and almost unusable. This is especially apparent if there are many rows in our TableViewComponent.
Is there a problem with the way I am using the modals, or is this an issue related to ngx-bootstrap modals? OR, is the issue related to the browser and unavoidable? I am developing on Chrome 62 right now.
I have verified that onDestroy is never called on the TableViewComponent inside the modal. It is not even called if I navigate to a different page component, though another table (not in the template) does have onDestroy called when navigating from the page.
Any feedback is appreciated greatly- I have been stuck for way too long on this.
This is an issue of ngx-bootstrap, unfortunately. I created a pull request (https://github.com/valor-software/ngx-bootstrap/pull/3179) so this will be fixed as soon as my PR is merged and new version is released.
I am getting up to speed with Bootstrap's grid system but the following example confuses me. In the following there are two (2) column classes - col-xs-5 and col-lg-1 - for each div with class form-group
<div class="container-fluid">
<form role="form">
<div class="row">
<div class="form-group col-xs-5 col-lg-1">
<label>
Name
</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5 col-lg-1 ">
<label>
Email
</label>
<input type="text" class="form-control input-normal" />
</div>
</div>
</form>
</div>
Can someone explain why this is done?
Each column class describes how many columns the element will take up at that designated breakpoint. For example:
<div class="form-group col-xs-5 col-lg-1 ">...</div>
This element will take up 5 columns if the page is being rendered at the xs breakpoint (screen width of <768px) but will only take up one column at the lg breakpoint ( >1200px )
This lets you set the presentation of the same element at different screen widths.
For each row you have one column.
It's set to five columns wide for extra small to medium screen sizes with by "col-xs-5" and one column for large screen sizes with "col-lg-1". By default with bootstrap you can set four different layouts (extra small, small, medium and large) to suit different screen sizes.
If you make your browser window size smaller you will see how it effects it.
See http://getbootstrap.com/css/#grid for information on how the grid system works.
It's well worth reading though the documentation as it's very good. See http://getbootstrap.com/css/