I'm working with Bootstrap 3 and the AngularJS UI.
I've integrated a Datepicker into an accordion, but it doesn't show over/outside the accordion body in itself.
I found a reference on the same problem and the solution (here), but it's with Bootstrap 2.3.1 and after trying the .collapse{ position:inherited; } solution on my code and trying to override the z-index, it's still not working.
Here's a Plunker with the problem on 2.3.1 so you can understand the problem, and my current code. Any ideas on what's causing the problem?
<div class="row ix-advanced">
<div class="panel-group col-md-12" id="accordion">
<div class="panel panel-default">
<div id="advancedSearch" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group col-md-1">
<label><?php echo _t('Date')?></label><br />
<input type="text" class="form-control input-sm" datepicker-popup="dd-MM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" placeholder="<?php echo _t('From')?>"/>
</div>
<div class="form-group col-md-1">
<label><?php echo _t('To')?></label><br />
<input type="text" class="form-control input-sm" placeholder="<?php echo _t('To')?>">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
in your css, overwrite bootstrap's panel overflow: hidden property with
.panel-group .panel {
overflow: inherit;
}
The solution is to add to the last datepicker the following attribute:
datepicker-append-to-body="true"
You may also want to change the attribute "open" to "is-open".
You can see the results in the updated plunker.
I've updated the plunker to the latest versions and it seems to work fine.
My problem though is that if you layout your controls with the grid system, then the popup is clipped to fit the row and col-
-Stephen
Related
I'm creating a Reactive form in Angular 6.
In typescript file I'm getting the form instance and form controls.
after that iterating through the form controls and printing the user given values.
When do ng serve in the console of the browser I'm getting the error.
Here is the code.
html
<div >
<h2>Login</h2>
<form class='form' [formGroup]='loginForm' (ngSubmit)='onSubmit()'>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username"
placeholder="Username"
[ngClass]="{ 'is-invalid': submitted && f.username.errors }"/>
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">Username is required</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
placeholder="Password"
[ngClass]="{ 'is-invalid': submitted && f.password.errors }"/>
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
</div>
</div>
<div class="form-group">
<label><input type="checkbox"> Remember me</label>
</div>
<div class="form-group">
<button [disabled]="loading" type="submit" class="btn btn-
primary">Login</button>
</div>
My form fields are displaying whole screen. Please see the attached image.
But I want to display all the controls to the center of the screen.
i.e. I need place left,right,top and bottom equal space.
Please help me in solving this issue.
The error throws because of the wrong formGroup name. In the ts file you have created the formGroup name as loginFormGroup and in the html the formGroup name is 'loginForm'. change it like this
<form class='form' [formGroup]='loginFormGroup' (ngSubmit)='onSubmit()'>
give your top most div class suppose makeItCenter and add following css
.makeItCenter {
width: 50rem;
height:100vh;
display:flex;
align-items: center;
justify-content:center;
}
place the whole form tag in
<div class="row">
<div class="col-sm-6 col-lg-offset-3">
set your form here
</div>
</div>
this is simple bootstrap
I am using angular version 1.5.5 and recently upgraded to angular material 1.1.0. After upgrading I started facing few issues in ng messages. Initially ng messages was not displaying. I fixed it by adding below class by referring to git issue
md-input-container .md-input-message-animation:not(.ng-animate) {
opacity: 1;
margin-top: 0px;
}
Now same ng message is displaying multiple times.
<div class="inputbox-area" ng-form='subForm'>
<md-input-container class="md-block" ng-repeat="item in dg.inputArr">
<label>Level {{$index+1}}</label>
<input md-maxlength="32" maxlength="32" ng-change="dg.showErrors = false" name="{{item.Level}}" required ng-model="item.Name" ng-pattern="/^[-a-zA-Z0-9,._' ]*$/" type="text">
<div ng-messages="subForm[$index+1].$error" ng-if="dg.showErrors">
<div ng-message="required">Level {{$index+1}} is mandatory</div>
<div ng-message="md-maxlength">should be less than 32 characters long.</div>
<div ng-message="duplicate">Level {{$index+1}} is a duplicate name</div>
<div ng-message="pattern" class="my-message">Level {{$index+1}} is an invalid name</div>
</div>
</md-input-container>
</div>
Any suggestions where I am going wrong?
<div class="inputbox-area" ng-form='subForm'>
<md-input-container class="md-block" ng-repeat="item in dg.inputArr">
<label>Level {{$index+1}}</label>
<input md-maxlength="32" maxlength="32" ng-model-options="{ updateOn: 'submit' }" ng-change="dg.showErrors = false" name="{{item.Level}}" required ng-model="item.Name" ng-pattern="/^[-a-zA-Z0-9,._' ]*$/" type="text">
<div ng-messages="subForm[$index+1].$error" ng-if="dg.showErrors">
<div ng-message="required">Level {{$index+1}} is mandatory</div>
<div ng-message="md-maxlength">should be less than 32 characters long.</div>
<div ng-message="duplicate">Level {{$index+1}} is a duplicate name</div>
<div ng-message="pattern" class="my-message">Level {{$index+1}} is an invalid name</div>
</div>
</md-input-container>
</div>
The problem is your model getting updated each time an event fires so add ng-model-options="{ updateOn: 'submit' }" in your input box this will fire only when you submit that form
Im not 100% sure, but i think ng-messages should refer to the name of the input field like this:
ng-messages="subForm.{{item.Level}}.$error"
I dont know if this sintax is gonna work, but try it out and see if it does.
Looking at this example: http://angular-formly.com/#/example/bootstrap-specific/advanced-layout
What makes the fields display horizontally? Is it the row class on the field group? Or at the col-xs-6 classes on the individual fields (when looking just at the First/Last name fields)?
I am asking because at my work we are unable to use the twitter bootstrap (arg!) and I am having trouble making fields get on the same lines like this example when not using the bootstrap.
Do you have to use the bootstrap classes in order to get fields on the same row?
CSS. They are wrapped in a div with the col-xs-6 class applied. That class is floated left and has a width of 50%.
.col-xs-6 {
width:50%;
float:left;
}
https://jsfiddle.net/6njkou1g/
Depending on the browser support you need, you might consider this example which doesn't require bootstrap at all and instead uses flexbox to do layout. Otherwise, what Brian said about implementing a subset of bootstrap's grid system yourself wouldn't be too tricky...
Use col-xs-6 for two columns.
<form class="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
</div>
</form>
http://jsfiddle.net/rwfje779/
I have a simple page with validating the field, something like this:
employee.html and its validating the field but if I have added the same code and called the same page using ng-include the validating is not working
without ng-include validate works:
<form name="form" class="form-horizontal" ng-validate="create(data)" novalidate>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="" class="col-xs-6 control-label">First Name:</label>
<div class="col-xs-6">
<input name="first_name" type="text" class="form-control" ng-model="data.first_name" placeholder="First name" ng-required="true">
<div class="alert alert-danger" ng-show="form.$submitted && form.first_name.$error.required">Enter first name.</div>
</div>
</div>
</div>
</div>
</form>
with ng-include validate does not works:
dashboard.html
<div class="container">
....................
..................
<ng-include src="employee.html"></ng-include>
</div>
my question is: how can I make the validation works within ng-include?
yes your $submitted is not working angular version 1.3. if you need to show the message if only form is submit then you can keep a variable to detect whether the form is submitted or not.
to do that
in controller test function
$scope.create = function(data) {
$scope.formSubmitted = true;
}
in validation message use formSubmitted instead of $submitted
<div class="alert alert-danger" ng-show="formSubmitted && form.first_name.$error.required">E..
here is the working Plunker
But if you are using angular 1.3 or later version
angular introduce a $submitted in angular 1.3.x and may be your trying with a older angular version, upgrading angular will solve your problem.
here is the Changes of the 1.3 - please check the
new feature: Add new $submitted state to forms
<div class="alert alert-danger" ng-show="form.$submitted && form.first_name.$error.required">Enter first name.</div>
here is the working plunker
You can use bootstrap validation in ui like that
<form name="personalinformation">
<label for="fname"> First Name<span style="color:red" ng-show="personalinformation.firstname.$error.required">*</span></label>
<input type="text" class="form-control" id="" placeholder="First Name" ng-model="PerInfo.FirstName" required name="firstname">
</form>
and if you validation by angular you can create validationFunction and ng-click pass the value of text or other element in controller.If input type is false then you cal fill value in ng-show="true"
Use <ng-form></ng-form> instead of <form></form>
All,
I am working on an AngularJS form and am trying to see how the ng-messages directive works with ng-messages-multiple. I can't seem to get it to pick up multiple errors. I expect to see both the required and minimum errors at the same time but for some reason I only see required, then minimum. I posted the HTML below. I have the ng-messages included using bower, the script call in my index.html page, and I am injecting into my app.js module as required.
I am using AngularJS v1.3.2 in this project.
<div class="panel panel-default">
<div class="panel-heading">
<h1>Validation Test Form</h1>
</div>
<div class="panel-body">
<form class="form" name="form" role="form" ng-submit="submit(form)">
<div class="row">
<div class="form-group" show-errors>
<label for="name">Name:</label>
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
<div ng-messages="form.name.$error" ng-messages-multiple class="has-error">
<div ng-message="required">Required!</div>
<div ng-message="minlength">Minimum length is 5</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
{{formError}}
</div>
</div>
Try to use ng-minlength instead minlength
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
ng-minlength="5"
required/>
instead
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
EDIT
It is normal behaviour for ng-minlength directive, this directive validate only when we have not 0 size of input, entered a value it must be at least 5 characters long, but it's ok to leave the field empty, and, unfortunately, in anyway you don't achieve, that you want. I offer you to create your custom directive or see in direction ng-pattern directive with need behaviour, if you very want that showing two message.