<input time="false" date="true" mdc-datetime-picker="" type="text" id="date"
placeholder="Date" ng-model="date" min-date="minDate" max-date="maxDate"
class="modal2">
This is for date picker. I wrote it in template.html of uibModal. I've tried with z-index but it doesn't work.
<style>
.md-dialog-container {
z-index: 1200;
}
</style>
This solves it. I inspect the container <div> and found its class.
In your code you are not using material datepicker,
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
DEMO
the below code works fine.
<style>
.md-datepicker-calendar-pane{
position: absolute !important;
z-index: 99999 !important;
}
</style>
you can use this style in your html..
Related
Can someone help with sample of embedding the lightning-icon inside a lightning-input in LWC
<lightning-input type="search" name="To Address" label="To"
class="slds-input-has-icon_right slds-m-bottom_small">
<lightning-icon icon-name=action:email>
</lightning-icon>
</lightning-input>
I have also tried the below Approach which doesn't work
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
<lightning-icon icon-name="utility:adduser" size="medium">
</lightning-icon>
<input type="text" id="text-input-id-1" class="slds-input" />
</div>
Here is the solution!!
<lightning-button-icon class="btnIconOverlay" icon-name="utility:adduser">
</lightning-button-icon>
<lightning-input type="search" name="To Address" value={toAddress}>
</lightning-input>
Add the below CSS to the lightning-button-icon, which assist in overlaying the icon.
.btnIconOverlay {
position: absolute;
z-index: 1;
margin: 0.5% 0 0 92%;
}
Here is my HTML input tag on which I have created conditional ng-class
<input type="text" class="form-control" placeholder="label" name="label"
ng-required="true" ng-class="{ missing: $ctrl.flag=='true'}"
ng-model="$ctrl.DataToSend.label[$ctrl.language]" />
And here is my CSS
.missing {border: solid 1px red;}
When my $ctrl.flag is true ng-class should get applied but it's not happening. Why?
You have to put the class which you want to apply in quotation marks. Otherwise it looks for an AngularJS variable where the string for the class name is contained.
Also make sure your condition is not always false. In your case the $ctrl.flag variable might store a boolean value. So change your condition to: $ctrl.flag
Updated Code:
<input type="text" class="form-control" placeholder="label" name = "label" ng-required="true" ng-class="{ 'missing': $ctrl.flag }" ng-model = "$ctrl.DataToSend.label[$ctrl.language]"/>
You can try this snippet.
Jsfiddle link
Snippet:
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.flag = true;
$scope.toggleClass = function() {
$scope.flag = !$scope.flag;
};
});
.missing {border: solid 1px red;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
<div ng-controller='ctrl'>
{{flag}}
<input type='text' class='form-control' ng-model='test' ng-class="{'missing': flag}" />
<button ng-click='toggleClass()'>
Change
</button>
</div>
</div>
This will work
I found the Issue with my code there is some other CSS which is overriding to my 'missing' css when changed the overridden CSS its started working fine.
input[type="text"].missing {border: 1px solid #ff0000;}
Previously it was
input[type="text"] {border: 1px solid #ddd;}
I want to use ui-bootstrap with <input type="date">. I get both the popups. I want to suppress the HTML popup.
<input type="date" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
Here's a plunker :http://plnkr.co/edit/aCxjDJwhqrzwc1CVrq90?p=preview
The following code works for chrome only
input[type=date]::-webkit-calendar-picker-indicator {
-webkit-appearance: none;
display: none;}
input[type="date"]::-webkit-input-placeholder{
visibility: hidden !important;}
For mozilla and other browsers write a focus event to prevent default.
Is there a specific reason why you want to use input type date?
If you just set the type to text you don't have to suppress anything.
I'm new to AngularJS and needing help on how to toggle classes on form elements if the input is valid or invalid.
I have noted that most validation is done within the DOM - see here: https://scotch.io/tutorials/angularjs-form-validation
However, I'm wanting to avoid using the dom to handle validation. I want to use a custom directive to handle if a input is valid or invalid based upon validation rules.
Here is my HTML / Angular markup so far:
<fieldset ng-class="{error: loginForm.username.$invalid}">
<div class="form-input-error" ng-show="loginForm.$error">
Username is too short.
</div>
<div class="vfnz-fieldWrapper">
<input
type="text"
id="username"
ng-model="username"
class="vfnz-input--text"
placeholder="Username"
ng-minlength="3"
ng-maxlength="8" />
<label for="name" class="vfnz-input-label">
Username
</label>
</div>
</fieldset>
Here is a JSFIDDLE of my code so far
Basically when a input is invalid - add class to the fieldset. If the input is valid add class to fieldset.
from angular 1.3.x they came up with ng-messages ,i think you should try this. The advantages of using it is it will show the appropiate error if your input contains multiple error's.Add your class to the validation div
the below example checks for required and number .
<form name='cliForm'>
<input ng-model="vm.formData.newCreditLimit" type="text" name="changeCreditLimit" ng-pattern="/^[0-9]{1,15}$/" required />
<div class="highlight" ng-messages="cliForm.changeCreditLimit.$error" ng-if="cliForm.$submitted">
<div ng-message="required">* This field is required!</div>
<div ng-message="pattern">* Not a valid number!</div>
</div>
</form>
before using this include the ng-messages script since its in different module and inject the ng-messages to your angular module
I'm also looking for a solution to this issue, but the (lazy) answer I'm opting for right now is just to let some directives determine whether the element is valid or invalid, and just let angular handle the css classes. What I'm doing is to just add the ff to my css file:
.ng-invalid {
border-color: #e51c23;
color: #e51c23 !important;
}
.ng-error {
border-color: #e51c23;
color: #e51c23 !important;
}
.ng-valid {
border-color: #4CAF50;
color: #4CAF50 !important;
}
I wanted to make simple form, without awesome div's and CSS - it structure is like:
<form id="cform" action="/" method="post">
<fieldset>
<label class="first" for="name">Nazwa firmy: </label><input id="name" name="name" type="text" />
<label class="first" for="email">Email: </label><input id="email" name="email" type="text" />
</fieldset>
</form>
CSS
#cform input, #cform textarea, #cform label, #cform select
{
float: left;
}
label.first, #cform input[type="submit"]
{
margin-bottom: 10px;
width: 150px;
float: left;
clear: both;
}
#cform textarea
{
width: 400px;
height: 250px;
margin-bottom: 10px;
}
In FF, IE8, Chrome and Opera it looks good. But in IE7 inputs are looking, like they don't have float at all. How to fix it? (version without adding divs please)
Aww, forgot link
http://site.amm.siedlce.pl/front/page/get/79/
IE7 doesn't support the attribute selector, input[type="submit"].
Reference them by class.