This is my angular controller:
app.controller("custctrl",["$scope","Restangular",function($scope,Restangular){
$scope.createcust=function(){
Restangular.all("customer").post($scope.cust);
console.log($scope.cust);
};
}]);
In the console I can find the object but the insertion failed and I get this error:
angular.js:10765 POST http://localhost:9000/customer 400 (Bad Request)
I'm using a modal and this is a part of my code:
<div id="inputModalCust" class="modal fade" ng-controller="custctrl" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><Strong><i class="fa fa-file"></i> Customer </Strong></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" >
<div class="form-group">
<label for="input" class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="cust.identity.companyName" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">logo</label>
<div class="col-md-10">
<input type="text" ng-model="cust.logo" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">Email</label>
<div class="col-md-10">
<input type="text" ng-model="cust.linkset" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">Phone</label>
<div class="col-md-10">
<input type="text" ng-model="cust.colorSet" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">Website</label>
<div class="col-md-10">
<input type="text" ng-model="cust.webSite" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">Category</label>
<div class="col-md-10">
<input type="text" ng-model="cust.category" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="input" class="col-md-2 control-label">Time zone</label>
<div class="col-md-10">
<input type="text" ng-model="cust.timeZone" class="form-control" placeholder="Value">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default" ><i class="gi gi-remove_2"></i> <Strong>Close</Strong></button>
<button type="button" data-dismiss="modal" class="btn btn-primary" ng-click="createcust()"><i class="gi gi-floppy_saved" ></i><Strong> Save</Strong></button>
</div>
</div>
</div>
</div>
The problem is that I had a wrong field, timeZone is an int this is why I had to change the type here from text to number:
<div class="form-group">
<label for="input" class="col-md-2 control-label">Time zone</label>
<div class="col-md-10">
<input type="**number**" ng-model="cust.timeZone" class="form-control" placeholder="Value">
</div>
</div>
Related
Newbie to bootstrap.I followed the bootstrap 4 documentation to create a simple modal.
Bootstrap 4 modal
And created a modal with two parts - Part 1 and Part 2 separated by a <hr> tag.
I couldn't succeed in putting the two parts - Part 1 and Part 2 side by side.
Link to modal:
CodePen modal
Here is my sample modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>
</button>
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
</div>
<div class="modal-body">
<form>
<h4>Part 1</h4>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">Check me out <span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
<hr>
<h4>Part 2</h4>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">Check me out <span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
</form>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
Is there any article to refer to or any suggestions to proceed further?
Try this:
<form>
<div class="row">
<div class="col-6">first side</div>
<div class="col-6">second side</div>
</div>
<form>
And also you should change your modal width.
I have two buttons in a bootstrap 4 flex row that refuse to align vertically. I want to align bottom with the inputs on the same row.
The fiddle is here.
The code:
<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
<div class="row form-group">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">O/C</label>
<input id="OC" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
Signature
</button>
</div>
</div>
<br>
<div class="row form-group">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">Witness</label>
<input id="Witness" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="WitnessName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
Witness Signature
</button>
</div>
</div>
</div>
I have tried adding mt-auto to the <button> element as per this Stack Overflow answer but it ad no apparent effect.
d-flex and flex-column are already added to card-body.
I would like the solution to use bootstrap helper utilities. The buttons also touch the inputs on small screens.
Maybe you can use this code align-items-end in each group of form-group:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
<div class="row form-group align-items-end">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">O/C</label>
<input id="OC" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2 ">
<button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
Signature
</button>
</div>
</div>
<br>
<div class="row form-group align-items-end">
<div class="col-md-2">
<label class="control-label control-label-left" for="OCQID">Witness</label>
<input id="Witness" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="WitnessName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
Witness Signature
</button>
</div>
</div>
</div>
and the result:
You can use .align-items-baseline after using .flex row.
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div class="center-block text-center">
<form asp-controller="Account" asp-action="Login" asp-route-returnurl="#ViewData["ReturnUrl"]" method="post" class="form-horizontal" role="form">
<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>
<div class="form-group">
<div class="col-md-10">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>
</form>
<p>
<a asp-controller="Home" asp-action="Register">Sign up</a>
</p>
<p>
<a asp-action="ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-controller="Home" asp-action="Index">Return</a>
</p>
</div>
</div>
<div class="col-md-4">
</div>
</div>
The text is centered, but the form has a width 10/12(83%). You should change the col-md-10 to col-md-12.
<div class="form-group">
<div class="col-md-12">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>
I think that it will be the best to remove the col-md-10 class:
<div class="form-group">
<div class="">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>
I acurrently have two input controls on the same line however they do not seem to align properly with the other controls above it and it looks rather off. I am not sure how to get them to align properly. Here is what the modal currently looks like: http://gyazo.com/4060e39e20391f1e9561e654dc64f9bb It's almost there but not quite there yet. Here is the HTML that I have writtem
<div id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<div class="col-md-5">
<label class="col-md-4 control-label" for="valueMin">Value Range:</label>
<div class="col-md-8">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false">
</div>
</div>
<div class="col-md-2">
<p>-</p>
</div>
<div class="col-md-5">
<div class="col-md-8">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
and here is my css that was auto generated when created my MVC project in visual studio
input,
select,
textarea {
max-width: 280px;
}
It is good practice to use rows when making columns.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
I have fixed your code in a pen.
http://codepen.io/costh/pen/XbzGxL
Looks like your columns are a bit confused...
Try this :
<div class="col-md-12" id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true" />
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<div class="col-md-4">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true" />
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<div class="col-md-4">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="valueMin">Value Range:</label>
<div class="col-md-10">
<div class="col-md-4">
<div class="col-md-5" style="padding-left:0px;">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false" />
</div>
<div class="col-md-2">
<p style="text-align:center;">-</p>
</div>
<div class="col-md-5" style="padding-right:0px;">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false" />
</div>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
</div>
Please excuse the in-line styles!
Try this:
<div class="col-md-5">
<div class="input-daterange input-group" id="valuerang">
<span class="input-group-addon">Value Range:</span>
<input class="input-sm form-control" name="start" type="text" id="abc" required> <span class="input-group-addon"> - </span>
<input class="input-sm form-control" name="end" type="text" id="abc" required>
</div>
</div>
make sure you modify the tag names to suit your application.
I want to use bootstrap panel to create advance search design.
Like in this image:
My HTML is this:
<div class="panel panel-primary aplxpert-distanta-sus" id="Antet">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left aplxpert-distanta-sus">Test List</h3>
<div class="btn-group pull-right">
<div class="row form-inline">
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label aplxpert-distanta-sus" for="Nume">Search:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control input-sm" placeholder="name......" id="cauta">
<span class="input-group-btn">
<button title="Click for search" type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div class="col-sm-1">
<a title="Advance Search" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="collapseOne" class="panel-body panel-collapse collapse">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume aa:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume aa:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume bb:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume bb:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume cc:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume cc:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
</div>
</div>
<div class="panel-footer">
<strong>Result return for this criterias:</strong> nume: Popescu Ion, data: 04.05.2014, CNP: 1361813282206
</div>
</div>
Something like this: http://jsfiddle.net/nkS2e/4/
How i can do this more better because on resize not work good and in not the best way.