I have created a datatable using jquery. Its second column has account numbers. When user will click on account number, then a modal should appear on the page. Something like below image.
But my modal doesn't appear like popup. It appears like this:
Below is my code:
<div id="select-account-expanded" style="display:none">
<!-- Begin of select-statement modal -->
<div class="modal fade" id="select-statement-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;">
<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" id="select-statement-title">Select Statement(s)</h4>
</div>
<div class="modal-body">
<table id="statement-table-modal">
<thead>
<tr>
<th>
<input type="checkbox" id="select-all-statement" value="" /><label for="select-all-statement"></label>
</th>
<th>Statement</th>
<th>Due Date</th>
<th>Total Due</th>
<th>Payment Amount</th>
</tr>
</thead>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
</div> <!-- End of modal -->
<table id="multiple-account-table">
<thead>
<tr class="border-class">
<th class="black white-active-bg pad-bottom-0-5">
<input type="checkbox" id="select-all-statement" value="" /><label for="select-all-statement"></label>
</th>
<th>Account Number</th>
<th>Account Name</th>
<th>Alias</th>
<th>Due Date</th>
<th>Total Due</th>
<th>Payment Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>input type="checkbox" id="statement" value="" /><label for="select-all-statement"></label></td>
<td><span id="launch-modal">1000</span></td>
<td>Alwar</td>
<td>07/07/2015</td>
<td>$1000.00</td>
<td><input type="textbox" value=""/></td>
</tr>
</tbody>
</table>
</div>
There is a link, by clicking on that link, modal appears. Below is javascript code for the same:
$(document).on('click', '#launch-modal', function () {
$("#select-statement-modal").modal();
});
Any suggestion?
UPDATE
I found my mistake. There was some mistake in importing bootstrap.min.css file. Now I have corrected.And it started working fine.
It Will work properly try to implement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" 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> -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="select-statement-title">Select Statement(s)</h4>
</div>
<div class="modal-body">
<table class="table table-bordered">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>aaa</td>
<td>bbb</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>eee</td>
<td>fff</td>
</tr>
<tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Continue</button>
</div>
</div>
</div>
</div>
</body>
</html>
Having spent a few hours debugging this same problem, I'd like to add a more detailed answer. The problem for me was that I mistakenly loaded the optional bootstrap theme css instead of the core css (on Wordpress):
wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css',array(),'3.3.7' );
I should have loaded this:
wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',array(),'3.3.7' );
(see the difference in the URL between the two).
Related
I have a table table-striped and in which row there is a delete button. When the user click in the delete button, a modal dialog show askig id the user really want to delete that row.
I need to get the value to be delete, how could I get id td?
function modalAvisoExclusao() {
$('#confirmaExclusao').modal('show');
}
function excluirUO() {
$('#confirmaExclusao').modal('hide');
var table = $('#Lista').DataTable();
var d = table.cell(this).data();
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="form-horizontal">
<div class="modal fade" id="confirmaExclusao" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
<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">Deleção Permanente</h4>
</div>
<div class="modal-body">
<p>Deseja realmente excluir este registro ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-danger" id="confirmUo" onclick="excluirUO();">Excluir</button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<table id="Lista" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
<i class='glyphicon glyphicon-pencil'></i> Alterar
</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal" onClick="modalAvisoExclusao();">
<i class='glyphicon glyphicon-trash'></i> Excluir
</button>
</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
<i class='glyphicon glyphicon-pencil'></i> Alterar
</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal" onClick="modalAvisoExclusao();">
<i class='glyphicon glyphicon-trash'></i> Excluir
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</form>
Use ligneSel to get the data you want. It's an array.
var table = $('#Lista').DataTable({
select: 'single'
});
//Get selected row data
$('#Lista tbody').on('click', 'tr', function() {
ligneSel = table.row(this).data();
$('#user_').html(ligneSel[0]);
alert(ligneSel)
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>
</head>
<body>
<form class="form-horizontal">
<div class="modal fade" id="confirmaExclusao" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
<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">Deleção Permanente</h4>
</div>
<div class="modal-body">
<p>Deseja realmente excluir este registro <span id="user_"></span>?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-danger" id="confirmUo">Excluir</button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<table id="Lista" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal">
<i class='glyphicon glyphicon-pencil'></i> Alterar
</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirmaExclusao">
<i class='glyphicon glyphicon-trash'></i> Excluir
</button>
</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
<i class='glyphicon glyphicon-pencil'></i> Alterar
</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal">
<i class='glyphicon glyphicon-trash'></i> Excluir
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</form>
</body>
</html>
I have an HTML page with lay out something like this:
The problem is. I want the MSAN and Users column in the same row, otherwise, for a large number of records, it won't be suitable. this is my HTML File. Ignore how the values are being shown or which.
<div class="panel panel-default">
<div class="panel-heading">
<br>
<h1 style="text-align: center">License Generator</h1><br>
<div class="row" [hidden]="!deleteMessage">
<!--<div class="col-sm-4"></div> -->
<div> <!---->
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>License Deleted</strong>
</div>
</div>
<!-- <div class="col-sm-4"></div> -->
</div>
</div>
<div class="panel-body">
<table class="table table-hover table-sm" datatable [dtOptions]="dtOptions"
[dtTrigger]="dtTrigger" >
<thead class="thead-light">
<tr>
<th>Customer ID</th>
<th>Hardware Key</th>
<th>Product</th>
<th>License Key</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students ">
<td>33333</td>
<td>22222</td>
<td>ABC</td>
<td><textarea rows="2" cols="20" wrap="hard">fxLBJ0BF5b+CLBCW9xamqsCgP0AyVIVpCCiYGI3WfEOAPPB7nVgHipERQmv2wVJYQI9PwfpS+4qP5owl4eDfI/f42cbu+SBTty3Sk/sGzZfon1xUndfAzsqbHD/DbFjQAtbpzeB7yr7AtNSV22WBv/lwC4ZW0k1KGR44tNM8aW5UQf9/WmuKeM/dFKIiW6vKMd9dn35jJ5AdlUIBRKwTFg==</textarea></td>
<td><button (click)="deleteStudent(student.student_id)" class='btn btn-primary'><i class="fa fa-futboll-0">Delete</i></button>
<button (click)="updateStudent(student.student_id)" class='btn btn-primary'
data-toggle="modal" data-target="#myModal">Update</button>
<button (click)="updateStudent(student.student_id)" class='btn btn-primary'
data-toggle="modal" data-target="#myModal">Copy License Key</button>
</td>
</tr>
</tbody><br>
<thead class="thead-light">
<tr>
<th>Max MSAN</th>
<th>Max Users</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students ">
<td>10000</td>
<td>10000</td>
</tr>
</tbody><br>
</table>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<form [formGroup]="studentupdateform" #updstu (ngSubmit)="updateStu(updstu)">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" style="text-align: center">Update Student</h4>
</div>
<!-- Modal body -->
<div class="modal-body" *ngFor="let student of studentlist " >
<div [hidden]="isupdated">
<input type="hidden" class="form-control" formControlName="student_id" [(ngModel)]="student.student_id">
<div class="form-group">
<label for="name">Student Name</label>
<input type="text" class="form-control" formControlName="student_name" [(ngModel)]="student.student_name" >
</div>
<div class="form-group">
<label for="name">Student Email</label>
<input type="text" class="form-control" formControlName="student_email" [(ngModel)]="student.student_email">
</div>
<div class="form-group">
<label for="name">Student Branch</label>
<select class="form-control" formControlName="student_branch" required>
<option value="B-Tech" [selected]="'B-Tech' == student.student_branch">ZMS</option>
</select>
</div>
</div>
<div [hidden]="!isupdated">
<h4>Student Detail Updated!</h4>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer" >
<button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Close</button>
</div>
</form>
</div>
</div>
</div>
There is nothing in the CSS file. If I try to keep all columns in same , then I lose the Search field and the number of entries data. I have taken help of a Spring Boot project from a website and got this, but not able to get this done. Please help. Stuck on this for hours.
try to add white-space:nowrap; to all the td and I think it should solve the problem
this is what nowrap does:
Sequences of whitespace will collapse into a single whitespace. Text
will never wrap to the next line. The text continues on the same line
until a tag is encountered.took from w3school
I designed modal. Which contains text boxes. In first row there are two text boxes and there column its button called add another. And in second row there are three text boxes and following rows same.In mobile view the content is floating of the box. I need to show text boxes in the modal. please help
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<button type="button" class="close" data-dismiss="modal">
<font color="black"> <a href="hrtoolkit.html" style="color:darkred">
<span style="color:darkred;">×</span></a></font></button>
<div class="form-body">
<label class=" col-sm-4">Edit View Save</label>
<br /><br />
<table id="table1">
<tbody>
<tr>
<td></td>
<td ><input type="text" placeholder="10th"/></td>
<td > <input type="text" placeholder="Degree" /></td>
<td > <button type="button" class="btn btn-default "
data-toggle="collapse" data-target="#filter-panel"
style="font-size: 9px; background-color: #ccc; font-weight: bold;">Add
Another</button>
</td>
</tr>
<tr>
<td >Stream<input type="text" placeholder="Stream"/></td>
<td > Institution<input type="text" placeholder="Institution" /></td>
<td >Yr of Passing <input type="text" placeholder="Yr of Passing" /></td>
</div>
</tr>
<tr>
<td >State<input type="text" placeholder="State"/></td>
<td >Country <input type="text" placeholder="Country" /></td>
<td > <input type="file" /></td>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have done this for you
.form-body {
overflow-x: scroll;
}
table tbody tr td {
padding: 0 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="">
<div class="row">
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<button type="button" class="close" data-dismiss="modal">
<font color="black"> <a href="hrtoolkit.html" style="color:darkred">
<span style="color:darkred;">×</span></a></font></button>
<div class="form-body">
<label class=" col-sm-4">Edit View Save</label>
<br />
<br />
<table id="table1">
<tbody>
<tr>
<td></td>
<td>
<input type="text" placeholder="10th" />
</td>
<td>
<input type="text" placeholder="Degree" />
</td>
<td>
<button type="button" class="btn btn-default " data-toggle="collapse" data-target="#filter-panel" style="font-size: 9px; background-color: #ccc; font-weight: bold;">Add Another
</button>
</td>
</tr>
<tr>
<td>Stream
<input type="text" placeholder="Stream" />
</td>
<td> Institution
<input type="text" placeholder="Institution" />
</td>
<td>Yr of Passing
<input type="text" placeholder="Yr of Passing" />
</td>
</tr>
<tr>
<td>State
<input type="text" placeholder="State" />
</td>
<td>Country
<input type="text" placeholder="Country" />
</td>
<td>
<input type="file" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to create a responsive table with footer. Right now i am using tag But i am facing issue with the footer. It doesnot show properly on different screen sizes. Footer should be fixed to bottom of page. If user tries to resize the page it should show scroll in that case, with footer at bottom.
Sample Image
<div class="container">
<table class="tablelog">
<thead id="thead">
<tr >
<th ><div style="width:15px;"></div></th>
<th ><div id="div-style">Column 1</div></th>
<th ><div id="div-style">Column 2</div></th>
<th ><div id="div-style">Column 3</div></th>
<th id="last-column"><div >Column 4</div></th>
</tr>
</thead>
<tbody id="tbody">
<tr class="active">
<td style="padding-right:15px;"><div class="triangleright"></div></td>
<td ><div id="div-style">value</div></td>
<td ><div id="div-style">value</div></td>
<td >
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr><tr>
<td style="padding-right:15px;"><div></div></td>
<td ><div id="div-style">value</div></td>
<td ><div id="div-style">value</div></td>
<td >
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr><tr>
<td style="padding-right:15px;"><div></div></td>
<td ><div id="div-style">value</div></td>
<td ><div id="div-style">value</div></td>
<td >
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
</tbody>
<tfoot >
<div id="page-selector-control">
<div id="pageselectorButtonContainr">
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-right.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-right.png"></button>
</div>
<div class="pager-control">
<div id="pagerdevidercontainer">
<div id="pagerdeviderdivfirst"></div>
<div id="pagerdeviderdivsecond"></div>
</div>
<label >Page</label>
<input accept="number" id="pagetextfield" type="text" ng-reflect-model="1" class="ng-untouched ng-pristine ng-valid">
<label >of</label>
<label > </label>
<label >1</label>
</div>
</div>`enter code here`
</tfoot>
</table>
</div>
See updated <tfoot> here -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table tablelog">
<thead id="thead">
<tr>
<th>
<div style="width:15px;"></div>
</th>
<th>
<div id="div-style">Column 1</div>
</th>
<th>
<div id="div-style">Column 2</div>
</th>
<th>
<div id="div-style">Column 3</div>
</th>
<th id="last-column">
<div>Column 4</div>
</th>
</tr>
</thead>
<tbody id="tbody">
<tr class="active">
<td style="padding-right:15px;">
<div class="triangleright"></div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
<tr>
<td style="padding-right:15px;">
<div></div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
<tr>
<td style="padding-right:15px;">
<div></div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
</tbody>
<!-- <tfoot>
<tr>
<th></th>
<th colspan=3>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-left.png">1</button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-left.png">2</button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-right.png">3</button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-right.png">4</button>
</th>
<th colspan=1>
<label>Page</label>
<input accept="number" id="pagetextfield" type="text" ng-reflect-model="1" class="ng-untouched ng-pristine ng-valid">
<label>of</label>
<label> </label>
<label>1</label>
</th>
</tr>
</tfoot> -->
</table>
</div>
</div>
</body>
<footer style="position: fixed;bottom: 0px;" class="col-xs-12">
<div id="pageselectorButtonContainr" class="col-xs-6">
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-right.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-right.png"></button>
</div>
<div class="pager-control col-xs-6 pull-right">
<label>Page</label>
<input accept="number" id="pagetextfield" type="text" ng-reflect-model="1" class="ng-untouched ng-pristine ng-valid">
<label>of</label>
<label> </label>
<label>1</label>
</div>
</footer>
</html>
I've also used bootstrap here, which is useful for responsive design.
I have a table and put 2 buttons in the last column, but they are one below each other. It looks as following:
The HTML code look as following:
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width: 80%;">
<thead>
<tr>
<th>ID</th>
<th>Gender</th>
<th>FirstName</th>
<th>LastName</th>
<th>EMail</th>
<th>CompanyName</th>
<th>JobTitle</th>
<th>Phone</th>
<th>Avatar</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in contacts">
<td>{{item.Id}}</td>
<td>{{item.Gender}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EMail}}</td>
<td>{{item.CompanyName}}</td>
<td>{{item.JobTitle}}</td>
<td>{{item.Phone}}</td>
<td><img src="{{ item.Avatar }}" /></td>
<td>
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary">Delete</button>
</td>
</tr>
</tbody>
</table>
I've tried a lot of settings, but it doesn't help.
How to put them next to each other?
UPDATE:
You can use below code and achieve
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Delete</button>
Or if you use Bootstrap then you can get Bootstrap Code from Bootstrap Group Buttons or use below code
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
to achieve
This is an easy problem to fix.
As you used tables in your structure, you can use tables in the last column.
Inside that last column td, add a table. The table body should look like this.
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width: 80%;">
<thead>
<tr>
<th>ID</th>
<th>Gender</th>
<th>FirstName</th>
<th>LastName</th>
<th>EMail</th>
<th>CompanyName</th>
<th>JobTitle</th>
<th>Phone</th>
<th>Avatar</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in contacts">
<td>{{item.Id}}</td>
<td>{{item.Gender}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EMail}}</td>
<td>{{item.CompanyName}}</td>
<td>{{item.JobTitle}}</td>
<td>{{item.Phone}}</td>
<td>
<img src="{{ item.Avatar }}" />
</td>
<td>
<table>
<tbody>
<tr>
<td>
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
</td>
<td>
<button ng-click="delete($index)" class="btn btn-primary">Delete</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
in stylesheet make button css display to inline or inline-block
Also do check the TD width and buttons width. If the buttons width is greater than the TD width it will break to next row for sure
Try this
<div class="list-unstyled list-inline"><button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button><button ng-click="delete($index)" class="btn btn-primary">Delete</button></div>
What you were looking for is a button group.
<div class="btn-toolbar" role="toolbar">
<!-- Button trigger modal -->
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#editModal">Edit
</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
</button>
</div>
</div>