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>
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 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.
This is what my table looks right now
Table:
I'm trying to place the small x button aligned next to the input textbox. Here's my code so far.
<table class="table table-hover">
<thead class="thead-inverse">
<th>Clave</th>
<th>Razón social</th>
<th>Contacto 1</th>
<th>Contacto 2</th>
<th>Contacto 3</th>
<th></th>
</thead>
<tbody>
<td class="col-md-1">
<input type="text" name="" class="form-control"/>
</td>
<td class="col-md-3">
<input type="text" name="" class="form-control"/>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
</tbody>
</table>
here is what you're looking for
td .btn {
position: absolute;
margin-top: 7px;
float: right;
margin-left: 5px;
}
td input {
float: left;
}
.spacer {
padding-left: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover">
<thead class="thead-inverse">
<th>Clave</th>
<th>Razón social</th>
<th>Contacto 1</th>
<th>Contacto 2</th>
<th>Contacto 3</th>
<th></th>
</thead>
<tbody>
<td class="col-md-1">
<input type="text" name="" class="form-control"/>
</td>
<td class="col-md-3">
<input type="text" name="" class="form-control"/>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td class="spacer">
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td class="spacer">
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td class="spacer">
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
</tbody>
</table>
Have you tried:
<td nowrap></td>
There is a CSS version of this:
th {
white-space: nowrap;
}
I tried to use bootstrapping to my whole project. But, the bootstrap works for the heading tag and not for the others. My codes are as follows.
<div class="container">
<div class="col-md-12">
<form class="form-horizontal templatemo-create-account templatemo-container" enctype="multipart/form-data" role="form" action="" method="post">
<div class="form-inner">
<center><em><h2>New Cumulative Deposit Account</h2></em></center>
<div id="cum_app_info">
<center> <h3> Personal Information </h3></center>
<table class="table table-striped">
<tr>
<td> <label for="cumfirstapp" class="control-label">First Applicant</label> </td>
<td> <input type="text" name="first_app" id="first_app" required class="form-control" value=""> </td>
<td> <label for="cumfirstappid" class="control-label">Member Id</label> </td>
<td> <input type="text" name="first_cum_app_id" id="first_cum_app_id" required class="form-control" value=""> </td>
</tr>
<tr>
<td> <label for="cumsecondapp" class="control-label">Second Applicant</label> </td>
<td> <input type="text" name="second_app" id="second_app" class="form-control" value=""> </td>
<td> <label for="cumsecondappid" class="control-label">Member Id</label> </td>
<td> <input type="text" name="second_cum_app_id" id="second_cum_app_id" class="form-control" value=""> </td>
</tr>
<tr>
<td colspan="4"><input type="submit" name="cum_app_next" class="btn btn-info" id="cum_app_next" value="Next" />
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</div>
I've made some minor changes like replacing the "center" elements with .text-center classes but it was working fine for me.
http://jsfiddle.net/c6b2trmw/1/
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal templatemo-create-account templatemo-container" enctype="multipart/form-data" role="form" action="" method="post">
<div class="form-inner">
<h2 class="text-center">
<em>New Cumulative Deposit Account</em>
</h2>
<div id="cum_app_info">
<h3 class="text-center">
Personal Information
</h3>
<table class="table table-striped">
<tr>
<td>
<label for="first_app" class="control-label">First Applicant</label>
</td>
<td>
<input type="text" name="first_app" id="first_app" required="" class="form-control" value=""/>
</td>
<td>
<label for="first_cum_app_id" class="control-label">Member Id</label>
</td>
<td>
<input type="text" name="first_cum_app_id" id="first_cum_app_id" required="" class="form-control" value=""/>
</td>
</tr>
<tr>
<td>
<label for="second_app" class="control-label">Second Applicant</label>
</td>
<td>
<input type="text" name="second_app" id="second_app" class="form-control" value=""/>
</td>
<td>
<label for="second_cum_app_id" class="control-label">Member Id</label>
</td>
<td>
<input type="text" name="second_cum_app_id" id="second_cum_app_id" class="form-control" value=""/>
</td>
</tr>
<tr>
<td colspan="4">
<input type="submit" name="cum_app_next" class="btn btn-info" id="cum_app_next" value="Next"/>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</div>
</div>
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