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.
Related
I've added this div containing a date picker and I've done it in a form, since there will be more fields later, but the first one I've added displays next to the table, instead of above. I've seen many answers to a similar question, but none applied to my situation.
This Fiddle shows it correctly.
Here's the container's piece of code:
<div class="container-fluid" id="container">
<br>
<div id="page" style="color:#373737">
<div class="row justify-content-around" id="selectFieldsDiv">
<div class="col-md-3 form-group">
<label for="agencySelect">Choose</label>
<select id="agencySelect" onchange="loadClientsFromSS(selectedAgency())">
<option value=""></option>
<option value="option1">Option1</option>
</select>
</div>
<div class="col-md-3 form-group">
<label for="clientSelect">Choose</label>
<select id="clientSelect" onchange="loadClientTasks(selectedClient())">
<option value="dsadads">Option1</option>
</select>
</div>
<div class="col-md-3 form-group">
<div id="addTaskBtnSpot"><button id="addTaskBtn" type="submit" class="btn btn-primary" onclick="addTaskFields()">Add task</button></div>
<div id="cancelTaskBtnSpot"></div>
</div>
</div>
</div>
<br>
<div id="addTaskFieldsDiv">
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
</div>
<div class="row" id="tableDiv">
<div class="col">
<div id="search-results" class="table-responsive">
<div class="card" id="card">
<table class="table table-borderless table-hover" id="dtable">
<thead style="white-space: nowrap">
<tr>
<th style="width: 4%" class="text-center">Client ID</th>
<th style="width: 4%" class="text-center">Task No</th>
<th style="width: 25%" class="text-center">Task</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AC002</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">1</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">Review and approve on page recommendations</td>
</tr>
<tr>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AC002</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">2</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">Review and approve content recommendations</td>
</tr>
</tbody>
</table>
</div>
<br>
</div>
</div>
</div>
</div>
Appreciate our help!
First of all remove the <br> and <div id="page"> because this (might) breaks the Bootstrap container>row>col layout.
<div class="container-fluid" id="container">
<br />
<div id="page" style="color: #373737">
<div class="row justify-content-around" id="selectFieldsDiv">
Then because the datepicker is located within the Bootstrap container start the layout with a proper row and column to wrap the form/datepicker in like so:
<div id="addTaskFieldsDiv" class="row">
<div id="addTaskFieldsDiv" class="col">
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" />
</form>
</div>
</div>
Make sure to repeat this pattern (container>row>col) throughout the document and see if fits your needs.
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 have a problem about aligning some items.
In the following Fiddle I have 2 options Option1 and Option2. I would like to align the toggle switches with the ones in the first two rows.
Basically I want the toggle switches to be in the second column of the table and the text that are below them in the first column.
Any ideas how can I solve it ?
Thank you
You're using bootstrap, so I would ditch the tables. But if you must use the tables, simply make the table rows and columns uniform.
Here's an updated fiddle with the correct nesting
<div class="container">
<table class="table table-bordered">
<thead style="" class="">
<tr class="d-flex">
<th class="col-6">My </th>
<th class="col-6"></th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="text-sm-left col-sm-11">some text
</td>
<td class="text-sm-right col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="text-sm-left col-sm-11">some text
</td>
<td class="text-sm-right col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="col-sm-12">testtexttex :</td>
</tr>
<tr class="d-flex">
<td class="col-sm-11">Option1
<button type="button" class='btn btn-secondary '>
<span class="fa fa-envelope"></span>
</button></td>
<td class="col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="col-sm-11">Option2
<button type="button" class='btn btn-secondary '>
<span class="fa fa-envelope"></span>
</button></td>
<td class="col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
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).
I have a page with 1 visible DIV and 2 hidden DIVs. When I click a button I want to show all 3 DIVs in the order as displayed below. I'm using Bootstrap.
Whats is happening is that the Visible Div is appearing only after the Hidden Div 2
Here's the code:
<div id="divEditor" hidden class="col-sm-8">
<textarea name="editor" id="editor"></textarea>
<div class="col-sm-6 marginVert12">
<a class="btn btn-single btn-gray pull-left" ng-click="stopEditing()"><i class="fa-angle-left"></i> Voltar</a>
</div>
<div class="col-sm-6 marginVert12">
<label class="col-sm-8">
<input type="text" placeholder="Nome" ng-model="nomeTemplate" class="form-control" />
</label>
<a class="btn btn-single btn-success col-sm-2" ng-click="stopEditing()"><i class="fa-save"></i> Guardar</a>
</div>
</div>
<div id="divVariaveis" class="col-sm-4 divDetail">
<h3 class="textAlign-Center">Variáveis</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Valor</th>
<th>Texto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-8">
<div class="col-sm-12 marginVert12">
<a class="btn btn-single btn-success pull-right" ng-click="startEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-file-o"></i> Novo Template</a>
</div>
<table class="table table-striped table-bordered table-hover" id="tblTemplates">
<thead>
<tr>
<th>Nome</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rodapé</td>
<td><button class="btn btn-single btn-orange" ng-click="footerEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-edit"></i> Editar</button></td>
</tr>
<tr>
<td>Carta Apresentação</td>
<td>
<button class="btn btn-single btn-info pull-left" ng-class="editing ? 'disabled' : ''"><i class="fa-file-pdf-o"></i> Ver em PDF</button>
<button class="btn btn-single btn-orange pull-left" ng-click="cartaEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-edit"></i> Editar</button>
<button class="btn btn-single btn-danger pull-left" ng-class="editing ? 'disabled' : ''"><i class="fa-remove"></i> Remover</button>
</td>
</tr>
</tbody>
</table>
</div>
This is how you want to arrange them:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12"></div>
<div class="col-sm-12"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
Your col-sm-8's content should go in the above's col-sm-12s