Adding button next to input, horizontal form style - Bootstrap

Adding button next to input, horizontal form style - Bootstrap - javascript

I am trying to add a delete button next to an input.
My current code:
<form role="form" method="post" id="form">
<div class="form-group">
<div class="col-sm-9 ">
<span>Názov položky</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-3 ">
<span>Cena</span>
<input type="text" class="form-control">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
</div>
<p></p>
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</form>
Generated output:
The red button isn't on the right side of the last input.

Maybe one of these will work. You can create some margin inside of a input-group so the button isn't touching the input or use the grid.
See working example Snippets.
.input-group .input-group-btn.input-space {
padding-left: 15px;
}
.input-group .input-group-btn.input-space .btn-input {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
div.input-group .form-control.input-control {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<h3 class="well">Custom Input Group</h3>
<div class="row">
<form role="form" method="post" id="form">
<div class="col-sm-9 ">
<div class="form-group">
<label>Názov položky</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-3 ">
<div class="form-group">
<label>Cena</label>
<div class="input-group">
<input type="text" class="form-control input-control"> <span class="input-group-btn input-space">
<button class="btn btn-danger btn-md btn-input"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
</div>
</div>
<hr>
<div class="container">
<h3 class="well">Grid</h3>
<div class="row">
<form role="form" method="post" id="form">
<div class="col-sm-7">
<div class="form-group">
<label>Názov položky</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Cena</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-2">
<label>Odstrániť</label>
<div class="form-group">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
</div>
</div>

You must use the input-group as explained on the help page.
Here the relevant code
<span>Cena</span>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
</div>

This might break on mobile, but it looks good in a CodePen
<form role="form" method="post" id="form">
<div class="row">
<div class="col-sm-8">
<span>Názov položky</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-3">
<span>Cena</span>
<input type="text" class="form-control">
</div>
<div class="col-sm-1">
<br/>
<button class="btn btn-danger btn-md">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
</div>
<p></p>
<div>
<button class="add_field_button btn btn-success btn-md">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</form>

Related

Jquery Repeater, how to make the 'create button' at the bottom?

I understand that the data-repeater-create="" must be inside the id="left_repeater", otherwise it will not function as a create button. Is there a way that the button will function outside the id="left_repeater" or id="right_repeater"?
My goal is when I click add left button, it will only create the left input and vise versa for the add right button. Both of the button is at the very bottom.
JS fiddle link to see the codes
$('#left_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
$('#right_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div id="left_repeater">
<div data-repeater-list="left_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="left">
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
<!-- <div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div> -->
</div>
<div id="right_repeater">
<div data-repeater-list="right_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="right">
</div>
</div>
</div>
</div>
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div>
</div>
<div class="row">
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Left</span></span>
</div>
</div>
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Right</span></span>
</div>
</div>
</div>

Place the #left_repeater inside div container.
<div class="container">
<div id="left_repeater">
.....
</div>
</div>
add CSS style to this
.container {
display: flex;
}
https://jsfiddle.net/y1bpot5n//

a modal popup opening on the back of a modal popup

I have tried few things but didn't work, i need to open a modal popup on a modal popup either by hiding back modal popup or any other way.
I cannot inject controller instance too according to my application structure. Any help could be greatly appreciated.
As below, when i click on add stoppage button, a new modal opens, and this popup modal should hide or close & open again.
<div class="modal fade" id="editModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Update Route Details</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" name="updateRouteForm">
<fieldset>
<!-- Route ID-->
<div class="form-group">
<label class="control-label">Route ID</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
<input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
</div>
</div>
</div>
<!-- Route Name-->
<div class="form-group">
<label class="control-label">Route Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
</div>
</div>
</div>
<!-- Description-->
<div class="form-group">
<label class="control-label">Route Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
</div>
</div>
</div>
<!-- Route distance-->
<div class="form-group">
<label class="control-label">Route Distance</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
</div>
</div>
</div>
<br /><br />
<!-- Display Stoppage Data -->
<div align="center" class="form-group-sm">
<table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
<thead>
<tr>
<th class="btn-info">serialNo</th>
<th class="btn-info">Stoppage Name</th>
<th class="btn-info">Description</th>
<th class="btn-info">Route order</th>
<th class="btn-info">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stoppage in StoppageData">
<td>{{ stoppage.orderId }}</td>
<td>{{ stoppage.stoppageName }}</td>
<td>{{ stoppage.description }}</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
<button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
</div>
</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="closeUpdate()">Add Stoppage</button>
<button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
AddStoppage Popup code:
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" align="center">Add Stoppage</h4>
</div>
<div class="modal-body">
<!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
<form class="well form-horizontal" id="addStoppageForm">
<fieldset>
<!-- Stoppage Name-->
<div class="form-group">
<label class="control-label">Stoppage Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
</div>
</div>
</div>
<!-- Stoppage Description-->
<div class="form-group">
<label class="control-label"> Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="r.addStoppageRow(stoppage)">Submit</button>
<button type="button" class="btn btn-info pull-right" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>

Ideally multilevel modals are not supported by bootstrap. you would have to do it manually/programmatically by JavaScript; in your controller for your case.
You can make a flag variable to add some more css to the modal body. That flag can be active when there are more than one flags.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">One</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addModal">Two</button>
<div class="modal fade" id="editModal" role="dialog" ng-style="{display: hide ? 'none': 'block'}">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Update Route Details</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" name="updateRouteForm">
<fieldset>
<!-- Route ID-->
<div class="form-group">
<label class="control-label">Route ID</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
<input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
</div>
</div>
</div>
<!-- Route Name-->
<div class="form-group">
<label class="control-label">Route Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
</div>
</div>
</div>
<!-- Description-->
<div class="form-group">
<label class="control-label">Route Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
</div>
</div>
</div>
<!-- Route distance-->
<div class="form-group">
<label class="control-label">Route Distance</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
</div>
</div>
</div>
<br /><br />
<!-- Display Stoppage Data -->
<div align="center" class="form-group-sm">
<table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
<thead>
<tr>
<th class="btn-info">serialNo</th>
<th class="btn-info">Stoppage Name</th>
<th class="btn-info">Description</th>
<th class="btn-info">Route order</th>
<th class="btn-info">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stoppage in StoppageData">
<td>{{ stoppage.orderId }}</td>
<td>{{ stoppage.stoppageName }}</td>
<td>{{ stoppage.description }}</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
<button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
</div>
</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="hide=true;closeUpdate()">Add Stoppage</button>
<button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" align="center">Add Stoppage</h4>
</div>
<div class="modal-body">
<!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
<form class="well form-horizontal" id="addStoppageForm">
<fieldset>
<!-- Stoppage Name-->
<div class="form-group">
<label class="control-label">Stoppage Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
</div>
</div>
</div>
<!-- Stoppage Description-->
<div class="form-group">
<label class="control-label"> Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="hide=false;r.addStoppageRow(stoppage)">Submit</button>
<button type="button" class="btn btn-info pull-right" data-dismiss="modal" ng-click="hide=false;">Cancel</button>
</div>
</div>
</div>
</div>

Login & Register modal

I've created two form in different php files one is Login form and other is Register form, Then there is two Login and Register buttons in the menu
How can i make these buttons shows their forms in modal?

You can do it with an ajax query so I gonna give you an example that how you can do it:
The HTML and JS:
<body>
<div id="my_modal" class="modal"></div>
<button onclick="showLoginModal()">Login</button>
<button onclick="showRegisterModal()">Register</button>
</body>
<script>
function showLoginModal(){
$.ajax({
url:'php/login_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
function showRegisterModal(){
$.ajax({
url:'php/register_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
</script>
The login_content.php file:
<?php ?><div class="modal-content">
<form action="" method="post">
User
<input name="user_name" id="user_name" type="text"> Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login">Login</button>
</form>
The register_content.php file:
<?php ?>
<div class="modal-content">
<form action="" method="post">
Username
<input name="user_name" id="user_name" type="text">
Password
<input name="user_pass" id="user_pass" type="password">
Confirm Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login"> Register</button>
</form></div>
Greetings!

I'll flesh out my comment on Darwin's answer a little more so you can see what I am talking about.
Now, I warn you about having a fallback way to get the user to the login page just in case javascript doesn't work for whatever reason (and there are many reasons why it wouldn't), but that being said.
The code here is not entirely correct as it involves multiple files, for a full working demo please go to This Plunkr
// Code goes here
$(function() {
$('.modal-btn').on('click', function(e) {
e.preventDefault();
var id = this.id;
$('#login-register-modal').load(id + '_content.html', function(response, status) {
if (status == 'success')
$('#login-register-modal').modal();
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Link <span class="sr-only">(current)</span>
</a>
</li>
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
<li role="separator" class="divider"></li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="btn-group">
<button id="login" class="btn btn-default modal-btn">Login</button>
<button id="register" class="btn btn-default modal-btn">Register</button>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="login-register-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" 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>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Register_content.html
<div class="modal-content">
<div class="modal-header">
<h2>Register</h2>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
Login_content.html
<div class="modal-content">
<div class="modal-header">
Login
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" /> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>

ui-sortable auto scrolls to the bottom of the page

Okay i have the following list:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px;" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="Er du sikker du vil slette modulet?" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i> Skift modul
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;">Kursus
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="Er du sikker du vil slette kurset?" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i> Ret kursus
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>
This produces a list that looks something like this:
Now this works fine when there are few items however when the list is big enough and there scroll the drag and drop messes up. when i pick up an item on the middle of the page it always scrolls to the bottom and it is hard to get it to the top again!
Has anyone tried this before or know a way to fix it?

Editing object with modal jhipster

I used JHipster to create my project and it has been pretty smooth sailing of late. However, I ran into an issue with editing objects on my main.html. I am able to successfully edit the post when I'm on the posts.html page that the router points to, but I am unable to do it with the exact same code on my main.html. I am able to call the information from the postController on my main page, and it is displayed adequately. I am, however, unable to make my data appear inside the modal popup. I know the information is being received by the controller because my console.log($scope.post) returns the object that I want to edit. However, that information is not transmitted to my modal. Any help appreciated.
Button that calls edit:
//inside postController and an ng-repeat of posts calling update function
<button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
Actual Modal Code:
<div ng-controller="postController">
<textarea class="form-control" rows="3" placeholder="Status update here..." data-toggle="modal" data-target="#savePostModal" ng-click="clear()"></textarea>
<div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="create()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" name="id" ng-model="post.id" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Text</label>
<textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
Update function
$scope.update = function (id) {
$scope.post = Post.get({id: id});
$('#savePostModal').modal('show');
};
I know it's successfully calling this get function, but the data from the $scope.post isn't being used.

As it turns out, in order for a modal to work, it has to be in the same controller-div as the text that prints the button. I'm pretty sure this is because the scope on controllers is different if the div is different. Also, don't have a second modal with the same name for testing because it will inevitably fail because of the functions confusion over which one to use.
<div id="toBeUpdated" ng-controller="postController">
<div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="createMob()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" name="id" ng-model="post.id" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Text</label>
<textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
</div>
</div>
</div>
<li class="animate-repeat" ng-repeat="post in posts.slice().reverse() | checkboxAndFilter:search.$:search.author:search.name:search.id:search.text | limitTo: noPostsOnPage">
<div class="well ng-scope">
<div name="desktopPost" class="h4">
<input type="checkbox" name="checkered">  {{post.name}}   <span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
</div>
<div style="display: none" name="mobilePost" class="h4">
<div ng-click="postNameAlert(post.name);">
<div name="ellipse" style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;">{{post.name}}</div>
</div>
<input type="checkbox" name="checkered">  
<span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
  
<a class="pull-right" style="padding-top:7px" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
</div>
<p>
<div ng-bind-html="trustHtml(post.text)" hashtagify term-click="tagTermClick($event)" user-click="tagUserClick($event)"></div>
</p>
<br> {{post.author}} on {{post.date_Written}}
<br>
<div name="desktopSide">
<button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
<span class="glyphicon glyphicon-remove-circle"></span> Delete
</button>
</div>
<div style="display:none;" name="mobileSide">
<button class="btn btn-primary btn-xs" type="submit" ng-click="updateMob(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
<span class="glyphicon glyphicon-remove-circle"></span> Delete
</button>
</div>
<div class="animate-repeat" ng-repeat="summarized in filterID(post.id)">
<div class="animate-repeat" ng-repeat="new_post in getPost(summarized.child)">
<button class="pull-right btn btn-default btn-xs" ng-click="reversePostState(new_post.id, new_post.name, new_post.author)">
<span id="{{new_post.author}}" class="glyphicon glyphicon-plus"></span>
</button>
<div class="well ng-scope">
<h4>
{{new_post.name}}
<div id="{{new_post.name}}" style="display:inline;"> - {{new_post.author}}</div>
   <span ng-if="new_post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" ng-click="changeElemOnClick('id_search');changeid(new_post.id);">{{new_post.id}}</a>
</h4>
<div id="{{new_post.id}}" style="display:none;">
{{new_post.text}}
<br> {{new_post.author}}
on {{new_post.date_Written}}
<br>
</div>
</div>
</div>
</div>
</div>
</li>
<center ng-if="checkForPosts()">
<button class="btn btn-default" ng-click="incrementLimit()">
<span class="glyphicon glyphicon-arrow-down"></span>Show More Posts
</button>
</center>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Adding button next to input, horizontal form style - Bootstrap - javascript

Related

Jquery Repeater, how to make the 'create button' at the bottom?

a modal popup opening on the back of a modal popup

Login & Register modal

ui-sortable auto scrolls to the bottom of the page

Editing object with modal jhipster

Categories

Resources