I am trying to get the Bootstrap datepicker working under a tab and it seems like some issues with it using with ng-required attribute. It is not updating the model value. Seems like a bug but not sure. If you take out ng-required attribute everything would work just fine.
Any help would be helpful.
plunker: http://plnkr.co/edit/NFcm0Bpu0y45LsrzVtpr?p=preview
$scope.data = {
opened: false,
record:
{
"Date of Birth": "2005-10-29T00:00:00"
}
<form name="mainForm" novalidate>
<div class="container" ng-form="subForm">
<tabset>
<tab>
<div class="row">
<div class="col-sm-3">
<div class="form-group" ng-class="{'has-error': subForm['test'].$invalid}">
<label class="control-label">Date of Birth</label>
<p class="input-group">
<input type="text" name="test" class="form-control" datepicker-popup="dd-MMM-yyyy" ng-model="data.record['Date of Birth']" is-open="data.opened" datepicker-options="dateOptions" close-text="Close" ng-required="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-disabled="false" ng-click="openDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</tab>
</tabset>
</div>
</form>
It is working with Angular 1.2.16. The problem is when using with Angualar 1.3.0. Logged an issue with Angualr-ui.
Related
I am using Angular Js, in which I am using bootstrap css. I have a ng-repeat added to the form. I have a submit button at the end of page. I have added a required field validation to each of the controls being created in ng-repeat. On click of submit button, if the data is not available in any of the rows in ng-repeat, I am showing a error message. This works fine. However, if there are 20 rows in ng-repeat, and if all are left empty, clicking on submit button is dragging the page, thereby the submit button becomes invisible. I have used the below code:
<link href="/Content/bootstrap.css" rel="stylesheet" />
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="row" ng-repeat="Descriptions in seasonsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<br />
</div>
<br/>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="submitted=true" />
</div>
</div>
Adding screenshot to explain in more:
As you can see, the buttons are getting invisible when the error messages are shown. Is this the correct way to use css and span in ng-repeat. I have tried with setting
style="min-height:100px;"
in the form, but that did not solve it. How to fix this?
Thanks
It could work, but it's much more complicated than it needs to be. Check out angular forms (link below)
<div class="form-group col-md-5">
<textarea name="descriptionValidate_{{$index}}" class="form-control input-md noresize" required="" maxlength="500" ng-model="Descriptions.Description" noresize=""></textarea>
<span style="color: red;" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
It will turn into (styling excluded)
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
https://angular.io/docs/ts/latest/guide/forms.html
There are a number of validation rules built into an Angular input
required
ng-required="{ boolean }"
ng-minlength="{ number }"
ng-maxlength="{ number }"
ng-pattern="{ string }"
ng-change="{ string }">
More on input validation usages: https://docs.angularjs.org/api/ng/directive/input
Hopefully this helps simplify some of your code
I'm having a problem with my form. The browse button in the file input can't be seen as a whole. Here is the screenshot:
And my code:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-image fa-fw"></i> Photo List </h3>
</div>
<div class="panel-body">
<form action="upload-photo.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="file">Upload Photo</label>
<input class="form-control" type="file" id="file" name="files[]" multiple="multiple" accept="image/*" />
<p class="help-block">Example block-level help text here.</p>
</div>
<button type="submit" name="uploadp_btn" class="btn btn-primary">Upload!</button>
</form> <hr />
</div>
</div>
Am I missing something? Thank you.
Add the following CSS to your style sheet:
.form-control{
height: auto;
}
http://www.bootply.com/NMVB2TeaK2
Tested that one in Chrome and Firefox, seems to be working!
I think you need to use class name 'filestyle' instead of 'form-control'
<input class="filestyle" type="file" id="file" name="files[]"
multiple="multiple" accept="image/*" />
I have the following HTML:
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
</div>
<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>
JSFIDDLE
It renders like this:
How can I get both inputs and the button on the same line? I've been messing with the CSS but can't seem to get it to work. I was able to get it working with a table, but I know a CSS solution would be "better."
You can use Inline Forms like in the Bootstrap Documentation found here:
https://getbootstrap.com/docs/3.4/css/#forms-inline
The 'form-inline' class is probably what you're looking for.
Solution 1 - Using the Grid
Use the Bootstrap’s predefined grid classes for arranging the form elements.
The grid gives you a better control over the width of the elements and scales better than the Inline Form solution.
<form>
<div class="form-row">
<div class="form-group col-md-7">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price0" placeholder="Price (optional)">
</div>
</div>
<div class="form-group col-md-2">
<button type="submit" class="btn btn-primary" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</div>
</div>
</form>
Solution 2: Inline Form:
Use an Inline Form, as described by Bootstrap Inline Form Documentation.
You need to manually address the width and alignment.
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="input-group m-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price" placeholder="Price (optional)">
</div>
<button type="submit" class="btn btn-primary m-2" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</form>
Running Example
This JSFiddle shows both solutions running.
The sample code and fiddle are updated for Bootstrap 4.
Use grid layout with xs phone size to force grid on responsive, the grid is divided into 12 cells so you'll need 3 x 4.
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
You could also have one of them bigger than the others:
<div class="row">
<div class="col-xs-7">
</div>
<div class="col-xs-3">
</div>
<div class="col-xs-2">
</div>
</div>
As long as they add up to 12.
Demo
Bootstrap Grid
In Bootstrap 4 you use multiple
<div class="col"></div>
I want to put the login boxes in the center. Don't know how to do it in the bootstrap. can anyone say it is to be done.
Below is the code that I have written. Please Correct me
<div class="container-fluid">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
<button type="button" class="btn btn-primary btn-lg">Register</button>
<h3><strong>OR</strong></h3>
</div>
<div class="col-sm-6">
<form class="form-signin" style="text-align:center" role="form">
<h2 class="form-signin-heading">Please sign in to Continue</h2>
<div class="col-lg-7"><input type="email" class="form-control text-center" placeholder="Domain ID" autofocus required></div>
<div class="col-lg-7"><input type="password" class="form-control text-center" placeholder="Password" required></div>
<p><button class="btn btn-lg btn-primary" type="submit">Sign in</button>
</form>
</div>
</div>
If you only need to center the Login Div, simply follow the basic bootstrap grid standard.
The grid is divided into 12 columns. To center a div that spans 6 columns , you need it to be 3 columns away from the start very left of the page. i.e col-sm-offset-3
I modified your code to reflect the changes
<div class="container-fluid">
<div class="starter-template text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
<button type="button" class="btn btn-primary btn-lg">Register</button>
<h3>
<strong>OR</strong>
</h3>
</div>
<div class="col-sm-offset-3 col-sm-6">
<form class="form-signin text-center" role="form">
<h2 class="form-signin-heading">Please sign in to Continue</h2>
<input type="email" class="form-control text-center" placeholder="Domain ID" autofocus required>
<input type="password" class="form-control text-center" placeholder="Password" required>
<br>
<button class="btn btn-md btn-primary" type="submit">Sign in</button>
</form>
</div>
</div>
working code : jsBin : Centered Login Div
I already have one row
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label><div>Address</div>
<input type="text" name="type" value=""/>
</label>
<label>
<button class="btn btn-primary" type="button">Verify</button>
</label>
<label><div style="width:100%;height:150px;border:1px solid black;"></div></label>
</div>
</div>
And I want to do the div size full in the span9 .
So,How can i write it?
straight from the bootstrap docs my friend
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Check this jsFiddle
Bootstrap already have class form-inline to set into inline.
Use this in your existing div append this class="form-inline"
Replace this line
<div class="span9 delivery_section">
into
<div class="span9 delivery_section form-inline">
Already i use this, hope this help you!
Try this.
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label>Address</label>
<div class="input-group">
<input class="form-control" type="text" placeholder="Address">
<div class="input-group-btn">
<button class="btn btn-primary" type="button"> Verify </button>
</div>
</div>
<div style="width:100%;height:150px;border:1px solid black;"></div>
</div>
</div>
If it doesn't seem to work, it probably because I'm using bootstrap 3.
label is inline element. And moreover in bootstrap to accept the width by default they have specified the display property as 'block'. Just override the code by placing the following code. Then you will done with your code.
label {
display:inline-block;
}