I have the following field defined in my HTML code:
<label for="firstname" class="field prepend-icon"
ng-class="{ 'state-error': submitted && helpForm.firstname.$error.required }">
<input type="text" name="firstname" id="firstname" required=""data-ng-model="firstname"
class="gui-input" placeholder="First name...">
<label for="firstname" class="field-icon"><i class="fa fa-user"></i></label>
</label>
<span ng-show="{submitted && helpForm.firstname.$error.required}"
class="state-error">Enter first name</span>
Here is the CSS class:
.smart-forms span.state-error {
display: block !important;
margin-top: 6px;
padding: 0 3px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-size: 0.85em;
color: #DE888A;
}
The first part of the validation works well. That is, I am able to add the class 'state-error' to the Label upon validation error. I am using the condition:
ng-class="{ 'state-error': submitted && helpForm.firstname.$error.required }
and it works fine.
However, I am trying to use the same condition with 'ng-show' in order to HIDE the error message until there is a validation error, but I am not able to hide it. Here is the line of code that is responsible for it.
ng-show="{submitted && helpForm.firstname.$error.required}"
I also tried without the curly brackets like so:
ng-show="submitted && helpForm.firstname.$error.required"
In both cases the results were the same.
So the same condition works to add a class but doesn't work to show/hide element, what am I missing?
remove {}?
ng-show="{submitted && helpForm.firstname.$error.required}
OK. So the problem was in the CSS class.
I have defined:
display: block !important;
I removed this line and the problem was solved. Not sure, but i guess ng-show uses
'display:none'
and that my css class was overriding it. Anyway, it works now. So if you have the same problem, make sure to check your CSS class.
Related
As I saw in the documentation, Font Awesome has a way of put an icon in an input placeholder, doing something like this:
<Input placeholder=' Search' />
This is what I get:
No matter what code I put after &#x, it always renders the same icon.
I'm working with ReactJS and Reactstrap library. Any suggestion? Thanks a lot (sorry 4 my english)
You can't do it this way, because the font family of the input field is using an English font. Font Awesome uses it's own font file.
One way to implement this would be to use a positioned <i> element:
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<i class="fa fa-user fa-lg"></i>
</div>
.container {
position: relative;
}
.container i {
position: absolute;
left: 15px;
top: 40px;
color: gray;
}
Thanks in advance for your help.
I need to ensure even vertical spacing between DIVS containing a checkbox + a labels inside a form -- even when the page is resized. The problem I'm having is that the labels are different lengths, so when the page is resized, the spacing between the DIVS is consistent, but I want the spacing to be even between the end of one label (which may be up to 3 lines long), and the start of the next.
I was reading about flexbox, and hoped this would be an appropriate method to handle. But it's not working as I expected, perhaps because I'm doing it wrong. Or perhaps because I'm using the checkbox hack for custom checkboxes, and that is interfering?
Here's my code:
CSS:
/* CUSTOM CHECKBOX CONTROLS */
input[type=checkbox].css-checkbox {
position:absolute;
z-index:-1000;
left:-1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0;
}
input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
padding-left:19px;
height:14px;
display:inline-block;
line-height:14px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:16px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
background-position: 0 -14px;
}
label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_15092a7494cee0a8cdfe5f1e21e1e816.png);
-webkit-touch-callout: none; 212 247 8100
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* FLEXBOX CONTROLS */
.flex-container {
display:flex;
flex-direction:column;
height:450px;
align-items:baseline;
}
.flex-item {
margin:auto;
margin-left:0px;
flex-basis:0;
flex-shrink:1;
height:auto;
min-height:50px;
}
HTML:
<div class="flex-container">
<div class="flex-item"><input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox" />
<label for="checkboxG4" class="css-label radGroup1"><p>News, Commentary, Research & Special Reports</p></label>
</div>
<div class="flex-item"><input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox" />
<label for="checkboxG5" class="css-label radGroup1"><p>Get General Research that includes periodic Special Reports sent when a landmark market event occurs.</p></label>
</div>
</div>
sorry if this is answer is late but maybe this can still help you. Looking at the JFiddle link you provided here: Your JFiddle, the reason this is not working is because you have set the height of your labels to a fixed height of 14px (to work with the checkbox feature you implemented). You correctly set justify-content: space-around to do what you described, but if the content is always 14px regardless of how many lines it spans, then the space will remain the same no matter what. Since your checkbox feature requires this 14px height, you should instead apply this checkbox feature to a div nested inside the label, with the accompanying text outside this div, but still inside the label. Here is a JFiddle with the code I implemented to get this working.
The main HTML change is this:
<label for="checkboxG4" class="radGroup1">
<div class="css-label"></div>
<span>News, Commentary, Research & Special Reports</span>
</label>
instead of:
<label for="checkboxG4" class="css-label radGroup1">
<p>News, Commentary, Research & Special Reports</p>
</label>
and CSS changed to:
input[type=checkbox].css-checkbox + label div.css-label,
input[type=checkbox].css-checkbox + label div.css-label.clr {}
label div.css-label {}
instead of:
input[type=checkbox].css-checkbox + label.css-label,
input[type=checkbox].css-checkbox + label.css-label.clr {}
label.css-label {}
I am using Angular 1.2.16 and testing with IE 11.
In my app, in settings.html, I have the following section:
<section class='scrollable'>
<section class='hbox stretch'>
<aside class="aside-md bg-white b-r" data-ng-controller='RecipientsCtrl'>
<div data-ng-if='inputMode' data-ng-include="'partials/recipient-form.html'"/>
</section>
</section>
where 'scrollable' class is defined as:
.scrollable {
overflow-x: hidden;
overflow-y: auto;
}
and recipient.form:
<div class="panel-body">
<form name='rform' ng-submit='addRecipient(rform)' novalidate='novalidate' role="form">
<label>Recipient's Name</label>
<input type="text" class="form-control" ng-model='recipient.name' name="name" placeholder="Enter name" required='', data-mongoose-error=''/>
....
<button type="submit" class="btn btn-sm btn-success">Add</button>
</form>
</div>
A button click puts the controller in 'inputMode'. This works fine with Chrome, Safari and Firefox. In IE, when you click the button to get into the 'inputMode' it seems like nothing happens, but when you resize the window a bit you see the form.
The following makes it work in IE:
Remove the 'scrollable' class from the section (not an option as I need that)
Display the form directly without the 'inputMode' condition (not an option)
I tried ng-show as well at no avail.
Any ideas?
Thanks.
Changing the css seems to have fixed it:
.scrollable {
overflow-x: hidden;
overflow-y: auto;
min-height: 100%;
}
My code looks like this:
<div class="block-border"
data-ng-show="qty > 0">
xxx
</div>
I know there have been a lot of changes with Animation in AngularJS. Can someone tell me the easiest way for me to make it take 500ms to show and 50ms to hide the xxx when the value of qty changes. Note that I am using the very latest AngularJS.
Reference angular-animate.js
Add ngAnimate as a dependent module:
var app = angular.module('app', ['ngAnimate']);
Pick a name for your transition, for example 'fade', and then define the appropriate CSS classes based on the naming convention described in the documentation:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove,
.fade.ng-hide-add {
display: block !important; /* or inline-block, as appropriate */
}
.fade.ng-hide-remove {
transition: all linear 1000ms;
}
.fade.ng-hide-add {
transition: all linear 500ms;
}
Add the class to your element:
<div class="block-border fade" ng-show="qty > 0">
Demo: http://plnkr.co/edit/HWi0FfDOsHeSOkcrRtN2?p=preview
I couldn't get the accepted answer to work, but the following did work (taken largely from this ng-nuggets post):
.fade {
transition: all linear 500ms;
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
and then my HTML element which I wanted to fade in and out looked something like this:
<span data-ng-show="copyLinkClicked" class="fade">some text here</span>
As #MichaelNguyen mentioned, Bootstrap does appear to have a style already called fade, and we are using Bootstrap in our application, yet the above styles worked nonetheless. If you already have a style named fade, then change the name to something unique before using the above code.
If you want to fade in using ng-if as a boolean angular has some nice documentation here https://docs.angularjs.org/api/ngAnimate . I used ng-if for my fading purposes here's an example below:
form.html
<form name="exampleForm" ng-submit="submit()">
<input type="email" placeholder="Email Address" ng-model="email" required>
<input type="text" placeholder="Name" ng-model="name" required>
<input class="invalid-btn" ng-if="exampleForm.$invalid" type="submit" value="Invalid" />
<input class="valid-btn" ng-if="exampleForm.$valid" type="submit" value="Valid">
</form>
form.css
/* css for button that will show when form is invalid */
.invalid-btn {
border: 1px solid #222;
width: 100px;
height: 50px;
color: #222;
background: #fff;
}
.invalid-btn.ng-enter {
opacity: 1;
}
/* The finishing CSS styles for the enter animation */
.invalid-btn.ng-enter.ng-enter-active {
opacity: 0;
}
.valid-btn {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
}
/* The starting CSS styles for the enter animation */
.valid-btn.ng-enter {
transition:0.5s linear all;
opacity: 0;
}
.valid-btn.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 0.3s;
/* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
transition-duration: 0s;
}
/* The finishing CSS styles for the enter animation */
.valid-btn.ng-enter.ng-enter-active {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
opacity:1;
}
The way this works is if you want to fade in a button with a different color or text and different text color you can fade in a button when the form is filled out and valid and the invalid button will fade out leaving only one button depending on the state of the form. Kind of a hack but it works and looks smooth. I had to set a delay using .ng-enter-stagger because loading the animations at the same time was causing the buttons to blink and jump and not animate smoothly. So in this case we let invalid button hide first then load valid button when form is valid and all input fields have been filled out correctly.
This is very straightforward but I am not able to change the class.
I am basically verifying if the date is in correct format (DD-MMM-YYYY hh:mm:ss).
<input type="text" style="width : 80%" ng-model="startTime" ng-class="{invalid: !isValid ,valid: isValid}" />
where isValid is a scope variable which evaluates to true and false. The css class is not applied.
Here is the plnkr.
It is working. Inspect the element. Your bootstrap classes are overwriting it. Try this:
.invalid {
background-color: #FA787E !important;
}
.valid {
background-color: #78FA89 !important;
}