Level 73
Can you try to wrap it within a div with a class row and see what the result will be?
Nov 28, 2019
4
Level 2
Bootstrap Table Not full width
Bootstrap table not showing in full width. Can any one please help me?
<!DOCTYPE html>
<html>
<head>
<title>Customer Master</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<h3>Customer Master</h3>
<a class="btn btn-success" href="javascript:void(0)" id="createNewProduct"> Create New Customer</a>
<div class="table-responsive">
<table class="table table-bordered data-table table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Telephone</th>
<th>Mobile</th>
<th>Email</th>
<th>Address</th>
<th>Caller Feedback</th>
<th>Customer Response</th>
<th>Update Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="ajaxModel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modelHeading"></h4>
</div>
<div class="modal-body">
<form id="productForm" name="productForm" class="form-horizontal">
<input type="hidden" name="product_id" id="product_id">
<div class="form-group">
<label for="name" class="col-lg-1 control-label">Name</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Telephone</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="telephone" name="telephone" placeholder="Enter Telephone" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Mobile</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Enter Mobile" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="email" name="email" placeholder="Enter Email" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Address</label>
<div class="col-sm-12">
<textarea id="address" name="address" required="" placeholder="Enter Address" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Feedback</label>
<div class="col-sm-12">
<textarea id="caller_feedback" name="caller_feedback" required="" placeholder="Enter Caller Feedback" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Response</label>
<div class="col-sm-12">
<textarea id="customer_response" name="customer_response" required="" placeholder="Enter Customer Response" class="form-control"></textarea>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="saveBtn" value="create">Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('crm.index') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'telephone', name: 'telephone'},
{data: 'mobile', name: 'mobile'},
{data: 'email', name: 'email'},
{data: 'address', name: 'address'},
{data: 'caller_feedback', name: 'caller_feedback'},
{data: 'customer_response', name: 'customer_response'},
{data: 'updated_at', name: 'updated_at'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$('#createNewProduct').click(function () {
$('#saveBtn').val("create-product");
$('#product_id').val('');
$('#productForm').trigger("reset");
$('#modelHeading').html("Create New Customer");
$('#ajaxModel').modal('show');
});
$('body').on('click', '.editProduct', function () {
var product_id = $(this).data('id');
$.get("{{ route('crm.index') }}" +'/' + product_id +'/edit', function (data) {
$('#modelHeading').html("Edit Customer");
$('#saveBtn').val("edit-user");
$('#ajaxModel').modal('show');
$('#product_id').val(data.id);
$('#name').val(data.name);
$('#telephone').val(data.telephone);
$('#mobile').val(data.mobile);
$('#email').val(data.email);
$('#address').val(data.address);
$('#caller_feedback').val(data.caller_feedback);
$('#customer_response').val(data.customer_response);
})
});
$('#saveBtn').click(function (e) {
e.preventDefault();
$(this).html('Sending..');
$.ajax({
data: $('#productForm').serialize(),
url: "{{ route('crm.store') }}",
type: "POST",
dataType: 'json',
success: function (data) {
$('#productForm').trigger("reset");
$('#ajaxModel').modal('hide');
table.draw();
},
error: function (data) {
console.log('Error:', data);
$('#saveBtn').html('Save Changes');
}
});
});
$('body').on('click', '.deleteProduct', function () {
var product_id = $(this).data("id");
confirm("Are You sure want to delete !");
$.ajax({
type: "DELETE",
url: "{{ route('crm.store') }}"+'/'+product_id,
success: function (data) {
table.draw();
},
error: function (data) {
console.log('Error:', data);
}
});
});
});
</script>
</html>
Level 2
@nakov . Thanks for your reply. I added () but horizontal scroll bar appeared and size remain same.
<div class="row">
Level 73
@bhhussain so based wrap it within a <div class="col-12"> as well. Or add style="width:100%" to the table, as the container for some reason is not taking the full page as it seems.
Level 75
Have you tried to set a viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Please or to participate in this conversation.