I have a basic search bar with about 25 options to be searched, what I need to do is hide 2 of those options from the user. Initially, the modal with the options loads like this:
But if i write and delete something in the input this is what happens:
I need to hide the repeated option CÓDIGO and the blank one from the user, (just like the first image) but I'm having trouble doing so...
Here is the JQuery code used to perform the search:
$('#searchColumns').on('keyup', function () {
var search = $(this).val().toLowerCase();
$('#selectColumnsTable tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(search) > -1);
});
});
And just in case, the code for the modal: (using Alpine.js v2.8.2 and laravel-livewire)
<div x-data="{
data:columns,
selectedColumns: ['sap_id'],
}"
wire:ignore class="modal fade" id="selectColumnsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Selecionar Colunas</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<p class="mx-10 mt-4">Selecione até 9 colunas para exibir...</p>
<div class="text-center mx-10">
<div class="input-icon">
<input type="text" class="form-control" placeholder="Nome da coluna..." id="searchColumns">
<span>
<i class="flaticon2-search-1 text-muted"></i>
</span>
</div>
</div>
<div class="modal-body">
<div class="mt-6 text-center">
<table id="selectColumnsTable" class="table table-hover gy-5">
<thead>
<th class="text-left">
Coluna
</th>
<th class="text-left">
<i class="la la-eye"></i>
</th>
<thead>
<tbody>
<tr>
<td class="text-left ml-4">
<span x-html="columns[1].title"></span>
</td>
<td class="text-left">
<input
x-model="selectedColumns"
class="sapId"
id="sapId"
type="checkbox"
value="sap_id"
disabled
checked
>
</td>
</tr>
<template x-for="(column, index) in data" :key="index">
<tr x-show="column.field != 'id' && column.field != 'sap_id' &&column.title != '' && column.title != 'CÓDIGO'">
<td class="text-left ml-4">
<span x-html="column.title"></span>
</td>
<td class="text-left">
<input
x-model="selectedColumns"
id="selectColumns"
class="selectColumns"
type="checkbox"
:value=column.field
>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
<div class="modal-footer d-flex justify-content-around">
<button #click="displaySelected(selectedColumns)" type="button" class="btn btn-primary col-5" data-target="click">Exibir selecionadas</button>
<button type="button" class="btn btn-danger col-5" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
I don't know livewire or alpine, but it seems that jquery is showing what alpine hid.
See if this works for you, I tried to make a similar html structure, with the 2 lines starting hidden, and skip these 2 lines when searching the others:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<input type="text" id="searchColumns" />
<table id="selectColumnsTable">
<tr>
<td><span>CÓDIGO</span></td>
<td><input type="checkbox" checked="true" disabled /></td>
</tr>
<tr class="hidden">
<td><span>CÓDIGO</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr class="hidden">
<td><span></span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>RAZÃO SOCIAL</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>INT VISITA</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>INT COMPRA</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>ATENDIMENTO</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>SAC</span></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><span>INT COMPRA</span></td>
<td><input type="checkbox" /></td>
</tr>
</table>
<script>
$("#searchColumns").on("keyup", function () {
var search = $(this).val().toLowerCase();
$("#selectColumnsTable tr").filter(function () {
let linhaCodigo = $(this).find("span").html() === "CÓDIGO";
let linhaId = $(this).find("span").html() === "";
if (!linhaCodigo && !linhaId)
$(this).toggle($(this).text().toLowerCase().indexOf(search) > -1);
});
});
</script>
</html>
Related
I'm using the bootstrap4 framework for my web application. Here's my requirement
I have a table generated with some values & each row has a edit button at the end of the row (last column).
when edit button is clicked, it should pop up a form with existing data in the row. So that user can change only the refuired fields. I know this should be done using javascript to fill the text boxes in the current form. But with bootstrap4 framework i dont know the correct way to do this .
This is my table
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">TV 3</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Derana</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td colspan="2">TV 5</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">6</th>
<td colspan="2">TV 6</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">7</th>
<td colspan="2">TV 7</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
</tbody>
</table>
This is the edit button
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm" >
Edit
</button>
This is my POP form(modal) for the edit button
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Here is a fully working code and more dynamic approach to what you want. You can use native boostrap jQuery function to show your modal on edit click button in your row.
You can watch which button triggered the modal and from their you can grab all the data using jQuery function like closest() and find()
Once you have the respective row data you can then apply it to your form input which are in the modal
In addition, i have also a functionality where recording status is Y then the checkbox in the modal will automatically be checked and if its N then it will be unchecked.
Live Working Demo:
$("#ModalLoginForm").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
//get data
var cId = button.closest('tr').find('th').text() //1st th
var cName = button.closest('tr').find('th').next().text() //2nd th
var cDesc = button.closest('tr').find('th').next().next().text() //3 th
var isRecord = button.closest('tr').find('th').next().next().next().text() //4 th
//Apply data
$('[name="channelid"]').val(cId);
$('[name="channel"]').val(cName);
$('[name="description"]').val(cDesc);
//check the checkbox
if (isRecord == 'Y') {
$('[name="remember"]').prop('checked', true); //check the checbox
} else {
$('[name="remember"]').prop('checked', false);
}
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>TV 3</td>
<td>dfdf</td>
<td>N</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">4</th>
<td>TV 4</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">5</th>
<td>TV 5</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">6</th>
<td>TV 6</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">7</th>
<td>TV 7</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
</tbody>
</table>
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
$(".table .btn-info").on("click", function(){ //now it aply for every .btn-info in every .table... so its better to make a new class or id for your table
var thContentFromThisRow = $(this).closest("tr").find("th").html(); // copy data from the TH in the same ROW as your clicked button
$('[name="channelid"]').val(thContentFromThisRow); //here you select your desired input to fill by name and then use .val (short for value) and you insert your data...
});
This is a short way of collecting one inner html from your th inside row of your button. Just to show how it worsk. Anyway you should go to w3c or another basics page and learn the basics of js/jquery. This code I've written is in jquery since you have bootstrap.
I have a jsp where i see the result saved at Data Base in a table on the browser with options to edit, delete each row. I want to be able to click the edit link, fetch the data for that particular customer from data base with spring MVC and Hibernate and show it on the edit modal so that user can see the data and know which to edit.
Below is code Snippet, the line Edit Customer Detail is the link to edit the customer. Am not sure from here where to go, wheather to call an ajax function and how would the ajax function look like? and how will the ajax call the modal?
I saw this solution(Spring MVC Populate Modal Form) but it doesnt show how the modal will be called to populate the values from ajax. Or is there any other way? Could anyone please help, thanks.
<c:forEach var="customer" items="${customers}" varStatus="status">
<tr>
<td><c:out value="${status.count}" /></td>
<td><a title="Go to the Company Certificate Detail">${customer.customerName}</a></td>
<td>${customer.contactName}</td>
<td>${customer.street}</td>
<td>${customer.state}</td>
<td>${customer.zipCode}</td>
<td>${customer.country}</td>
<td>${customer.email}</td>
<!--below line of code till end of tag </td> not showing on browser -->
<td>
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="modal"
data-target="#editCustomerModal">Edit Customer Detail</a></li>
<li><a data-toggle="modal" data-target="#deleteCustomerModal_${customer.id}" >Delete Customer</a></li>
</ul>
</div>
</td>
</tr>
<!--Delete Customer Modal -->
<div id="deleteCustomerModal_${customer.id}" class="modal fade">
<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">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this Customer? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<i class="fa fa-trash-o"></i>Delete
</div>
</div>
</div>
</div>
</c:forEach>
My Modal to edit:
<!--Edit Customer Modal -->
<div id="editCustomerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Create New Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Customer Name:</label></td>
<td><input type="text" id="customerName" title="Company Name" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Contact Name:</label></td>
<td><input type="text" id="contactName" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">Street:</label></td>
<td><input type="text" id="street" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">State:</label></td>
<td><input type="text" id="state" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Zip-Code:</label></td>
<td><input type="text" id="zipCode" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Country:</label></td>
<td><input type="text" id="country" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Email:</label></td>
<td><input type="text" id="email" path="#"
class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer" value="Save"
class="btn btn-default" onClick="alert('To be Implemented');" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Try this, put a hidden value for the customer Id in your edit model,
<input type="hidden" id="customerId" path="customerId" class="form-control" />
Change your submit button into ordinary button for save the customer.
<div class="modal-footer">
<div>
<button type="button" class="btn btn-default updateCustomer" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
You can play with js, specially into the ajax,
<script type="text/javascript">
function ajaxCall(customerId) {
$.ajax({
type: "POST",
url: "/clause/getUpdate?customerId="+customerId ,
success: function(result) {
//populate customer list page again..
}
}
});
$('.updateCustomer').on('click', '.accountsEmployees', function () {
customerId=$("#customerId").val();
ajaxCall(customerId);
}
</script>
I'm simply trying to open a modal after a user submits a form that will contain either a "Success" message, or an error message. No matter what I try this modal will not open. Here's the code:
<div class="container-fluid" align="center">
<c:catch var="exception">${messages}</c:catch>
<c:if test="${not empty exception}">
<div style="text-align: left; color: orange">
<c:forEach var="msg" items="${messages}">
MESSAGE: ${msg}<br />
</c:forEach>
</div>
</c:if>
<div>
<form action="/save">
<table class="viewtable">
<tbody>
<tr>
<td class="labelfield">lab_id:</td>
<td>${lab.lab_id}<input name="lab_id" type="hidden"
value="${lab.lab_id}" /></td>
</tr>
<tr>
<td class="labelfield">display_name:</td>
<td><input name="display_name" type="text"
value="${lab.displayName}"></input></td>
</tr>
<tr>
<td class="labelfield">lab_type_id:</td>
<td><input name="lab_type_id" type="text"
value="${lab.lab_type_id}"></input></td>
</tr>
<tr>
<td class="labelfield">aventail_profile:</td>
<td><input name="profile" type="text"
value="${lab.profile}"></input></td>
</tr>
<tr>
<td class="labelfield">status:</td>
<td><input name="status" type="text" value="${lab.status}"></input></td>
</tr>
<tr>
<td class="labelfield">notes:</td>
<td><input name="notes" type="text" value="${lab.notes}"></input></td>
</tr>
</tbody>
</table>
<button type="submit" id="formSubmit" class="btn btn-primary" data-toggle="modal" data-target="#editLabModal" >Save Changes</button>
</form>
<div class="modal fade" id="editLabModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<c:catch var="exception">${messages}</c:catch>
<c:if test="${not empty exception}">
<div style="text-align: left; color: orange">
<c:forEach var="msg" items="${messages}">
MESSAGE: ${msg}<br />
</c:forEach>
</div>
</c:if>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If anyone has any suggestions it would be greatly appreciated!
You can't open a modal after a full page post, you will need to submit your form via Ajax and after the response show something
an example here jQuery AJAX submit form
$('#Cart tbody tr #quantity').on('keydown', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
$(this).closest('tr').next().find('input[type=number]').focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Cart" style="border-color: transparent;" class="table table-hover table-striped well">
<thead class="thead-inverse">
<tr>
<th class="col-lg-1 text-center">Quanity</th>
<th class="col-lg-3 text-center">Comment</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
I have a table with multiple rows and each row has two inputs. Both have different ids. I'm trying to focus on next row's input element by selecting the id when user presses tab key . Here's my code:
$('#Cart tbody tr #quantity').on('keydown', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
$(this).closest('tr').next().find('#quantity').focus();
}
});
While doing this, it selects the wrong textbox on the next row.Any help would be appreciated. thanks
No jQuery required. Just use the tabindex attribute and hook into the browser's native behaviour for applying focus state on tab key presses.
Example:
<table>
<tr>
<td>
<input type="text" tabindex="1">
</td>
</tr>
<tr>
<td>
<input type="text" tabindex="2">
</td>
</tr>
</table>
Recommended for accessibility too.
I am trying to understand why does my modal footer starts at the same place where modal body starts.
How can i make it start after modal body ends.
basically i am trying to understand why are the bottons in the footer, save and cancel not lined same as modal body
<div class="modal fade " id="CustomizeModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" 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>
<label class="modal-title" id="myModalLabel2">CUSTOMIZE ATTRIBUTES TO DISPLAY</label>
</div>
<div class="modal-body col-xs-12">
<div class="row">
<form role="form" >
<div style="margin-left: 10px; margin-right: 10px">
<table class="table table-striped">
<tr>
<td> <input type="checkbox"> </td>
<td> Search Attributes </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event IDs </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Occurrence Location & File Source </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Catagory </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Type and Aggregation </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> DSMT Information </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Create By, Updated By and Event Description </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Data Quality Issues and Severity </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Channel </td>
</tr>
</table>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="col-xs-12" >
<div class="row">
<div class="col-sm-4 pull-right">
<button class="btn btn-default btn-sm btn-block ebtn" data-dismiss="modal">Cancel</button>
</div>
<div class="col-sm-4 pull-right">
<button class="btn btn-block btn-sm btn-default ebtn" ng-click="submit()">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you just want to display everything in the modal straight up and down, adding rows/columns isn't necessary.
Try using this:
<div class="modal fade " id="CustomizeModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" 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>
<label class="modal-title" id="myModalLabel2">CUSTOMIZE ATTRIBUTES TO DISPLAY</label>
</div>
<div class="modal-body">
<form role="form" >
<div style="margin-left: 10px; margin-right: 10px">
<table class="table table-striped">
<tr>
<td> <input type="checkbox"> </td>
<td> Search Attributes </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event IDs </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Occurrence Location & File Source </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Catagory </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Type and Aggregation </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> DSMT Information </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Create By, Updated By and Event Description </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Data Quality Issues and Severity </td>
</tr>
<tr>
<td> <input type="checkbox"> </td>
<td> Event Channel </td>
</tr>
</table>
</div>
</form>
</div>
<div class="modal-footer">
<div class="pull-right">
<button class="btn btn-default btn-sm btn-block ebtn" data-dismiss="modal">Cancel</button>
</div>
<div class="pull-right">
<button class="btn btn-block btn-sm btn-default ebtn" ng-click="submit()">Save</button>
</div>
</div>
</div>
</div>
</div>[![enter link description here][1]][1]
It is because col-xs-12 is on the body of the modal which makes the body float left.
remove col-xs-12 and the footer will appear underneath as you are expecting.
Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog. - modal-lg and modal-sm
Large
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
Small
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>