<div class="col-md-12" style="padding: 10px">
<div class="card m-b-30">
<div class="card-header container-fluid" ">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-12 table-responsive">
<div id="order-listing_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
<div class="row">
<div class="col-md-12">
<table id="order-listing" class="table dataTable no-footer table-striped" style="border-bottom:1pt solid black" role="grid" aria-describedby="order-listing_info">
<thead>
<tr role="row">
<th width="70%"><b>Name</b></th>
<th><b>Active</b></th>
<th><b>Select</b></th>
<th><b>Delete</b></th>
</tr>
</thead>
<tbody>
#*#foreach (var item in Model)
{*#
<tr>
<td>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search here" style="width: 450px; height: 40px">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<i class="dripicons-search"></i>
</button>
</div>
</div>
</td>
<td>
<input type="checkbox" name="checkbox2">
</td>
</tr>
<tr>
<td>Test New</td>
<td><input class="form-check-input" type="checkbox" id="gridCheck"></td>
<td><button type="button" class="btn btn-icons btn-inverse-secondary" id="data-editbtn-id"><div><i class="icon-pencil"></i></div></button></td>
<td><button type="button" class="btn btn-icons btn-inverse-secondary" id="data-delete-id"><div><i class="dripicons-trash"></i></div></button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried aligning this checkbox with the Active column but my code doesn't align it with the specified column
whats wrong with my code?
some online HTML generates output the correct code with same code but when i edit it, the aligned doesn't work properly
I have attached my code above can anyone help me im using html and css for this.
Please give the below CSS, the input element is taking CSS of margin-left.
.form-check-input{
margin:0 !important;
}
And also give this CSS
.table td, .table th{
vertical-align: middle;
}
Related
I have this html page:
<div class="panel panel-default">
<div class="panel-heading">
<h1>Usuarios</h1>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nome</th>
<th>Telefone</th>
<th>Email</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let usuario of usuarios | async">
<td>{{usuario.nome}}</td>
<td>{{usuario.telefone}}</td>
<td>{{usuario.email}}</td>
<td><button (click)="deleteUsuario(usuario.id)" class="btn btn-danger">Delete</button>
<button (click)="updateUsuario(usuario.id)" class="btn btn-info" style="margin-left: 10px">Update</button></td>
</tr>
</tbody>
</table>
</div>
</div>
The width is following the navbar, so it's being stretched all the screen:
How can I reduce it to the center of the screen like a have a margin before and after the form?
I want it to be like this:
Looking at your screenshot I guess you are using Materialize CSS:
Try to the form code within below code:
<div class="container">
<div class="col s12">
<div class="panel panel-default">
<div class="panel-heading">
<h1>Usuarios</h1>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nome</th>
<th>Telefone</th>
<th>Email</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let usuario of usuarios | async">
<td>{{usuario.nome}}</td>
<td>{{usuario.telefone}}</td>
<td>{{usuario.email}}</td>
<td><button (click)="deleteUsuario(usuario.id)" class="btn btn-danger">Delete</button>
<button (click)="updateUsuario(usuario.id)" class="btn btn-info" style="margin-left: 10px">Update</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Just add this style code:
form {
max-width: 900px;
margin-left: auto;
margin-right: auto
}
how to set a button sit next to a table within a div.
my code is:
<div class="col-xs-6"> <!-- main div -->
<div> <!-- table div -->
<table class="table table-bordered table-striped text-center">
<thead><tr>
<!-- 4 Header -->
</tr></thead>
<tbody> <tr><td>
<!-- first row -->
</td></tr></tbody>
</table>
</div>
<div class="col-xs-4">
<div class="col-xs-2" >
<button type="button" class="btn btn-primary" name="search" id="search">Search</button>
</div>
<div class="col-xs-2" >
<button type="button" class="btn btn-primary" name="add" id="add">Add</button>
</div>
</div>
-- main div close
what i am getting is:
put the main div to class: col-xs-12
and button div to col-xs-8 or col-xs-10.
So, main is total 12 in which you are putting the Table with *-xs-2 and button with *-xs-8
Try this
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-xs-4">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-3" >
<button type="button" class="btn btn-primary" name="search" id="search">Search</button>
</div>
<div class="col-xs-3" >
<button type="button" class="btn btn-primary" name="add" id="add">Add</button>
</div>
</div>
</div>
</div>
</div>
Check this out: https://jsfiddle.net/hbp71ejr/
In my user table, there is an active field, instead of true/false I want the checkbox to be highlighted (it does not matter) if true and a minus sign (not important) if false.
And when changing user data, I want to click on one of these checkboxes to set the value.
How can I give a tick instead of a value?
<!-- user.html -->
<div class="container" ng-app="app" ng-controller="DashboardCtrl">
<div class="row table-responsive">
<table class="simple-little-table">
<tr>
<th>id</th>
<th>Name</th>
<th>Lastname</th>
<th>Username</th>
<th>email</th>
<th>Role</th>
<th>Active</th>
</tr>
<tr ng-repeat="user in users | filter:$scope.query">
<td>{{ user.id}}</td>
<td>{{ user.firstName}}</td>
<td>{{ user.lastName}}</td>
<td>{{ user.username}}</td>
<td>{{ user.email}}</td>
<td>{{ user.roles}}</td>
<td>{{user.active}}</td>
<td><div>
<button class="btn btn-primary" ng-click="editUser(user.id)">Редактировать</button>
</div></td>
</tr>
</table>
</div>
</div>
that's edituser.html
<div class="row">
<div class="col-lg-4 col-sm-12" style="margin: 15px">
Активация:
</div>
<div class="col-lg-6 col-sm-10" style="margin: 5px;">
<textarea style="display: inline-block; width: 100%; height:3rem; resize: none;" ng-model="user.active"
ng-if="editActive"/>
<div ng-if="!editActive" style="display: inline-block; width: 100%; overflow-wrap: break-word">
{{user.active}}
</div>
</div>
<div class="col-lg-1 col-sm-1">
<button ng-click="changeActive()"
ng-if="editActive">
<i class="glyphicon glyphicon-ok"
style="size: 20px"/>
</button>
<button ng-click="changeActive()"
ng-if="!editActive">
<i class="glyphicon glyphicon-pencil"
style="size: 20px"/>
</button>
</div>
If I got your point,you want to show checkbox and minus sign depend active field and you also want to check or tick the check box to change the data.
<input type="checkbox" ng-if="user.active"
ng-checked="user.active" ng-click="editUser(user.id)">
display minus when active false.
<span ng-if="!user.active"> <i class="glyphicon glyphicon-minus"/></span>
<div class="row">
<div class="col-lg-4 col-sm-12" style="margin: 15px">
Активация:
</div>
<div class="col-lg-6 col-sm-10" style="margin: 5px;">
<input type="checkbox" ng-if="editActive"
ng-checked="user.active" ng-click="editUser(user.id)">
<input type="checkbox" ng-if="!editActive"
ng-checked="user.active" ng-click="editUser(user.id)">
<!--<input type="checkbox" ng-if="user.active"-->
<!--ng-checked="user.active" ng-click="editUser(user.id)">-->
</div>
<div class="col-lg-1 col-sm-1">
<button ng-click="changeActive()"
ng-if="editActive">
<i class="glyphicon glyphicon-ok"
style="size: 20px"/>
</button>
<button ng-click="changeActive()"
ng-if="!editActive">
<i class="glyphicon glyphicon-pencil"
style="size: 20px"/>
</button>
</div>
after edit, shows ticks but does not change the value
I see two issues with my code. Header is not getting fixed and second issue is word wrap is not applicable for the headers/rows.
I have used bootstrap classes, but still facing issues. I want to fix the table header and only rows should be scrollable and if the text is long it should automatically word wrap. I have multiple columns in my application(approximately 15 columns).Please advice.
To view the sample code click here.
Sample html code:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<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>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped">
<thead>
<tr class="row">
<th class="col-md-3">Header1</th>
<th class="col-md-4">Header2Header2Header2Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-3">111111111111111111111111111111111111111111111111111111111111111111111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5443545435354543</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5437665</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5435435443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">68678454</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">786876</td>
<td class="col-md-3">8787876</td>
<td class="col-md-4">6765767</td>
</tr>
<tr class="row">
<td class="col-md-3">7656765</td>
<td class="col-md-4">656456</td>
<td class="col-md-3">116611</td>
<td class="col-md-4">43434</td>
</tr>
<tr class="row">
<td class="col-md-3">43243432434324342</td>
<td class="col-md-4">33344343233</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">4343</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">432434343243243</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">432443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">333333</td>
<td class="col-md-3">111312312123121</td>
<td class="col-md-4">32112</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
You could try a non table approach. If your ok with having set widths on the columns with content wrapping in the cells. Here's an example https://codepen.io/flurrd/pen/jmMNxK?editors=1100
Note: Class names are terrible in this example. I'd BEM it up for proper usage.
.table-body {
max-height: 200px;
overflow-y:auto;
}
.t-row {
display: flex;
border-bottom: 1px solid grey;
}
.t-row:nth-child(even){
background: #e3e3e3;
}
.col {
word-wrap: break-word;
flex: 1 0 30%;
max-width: 33.3333%;
}
.cell {
padding: 8px;
}
<div class="table-wrap">
<div class="t-row t-header">
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
</div>
<div class="table-body">
<div class="t-row">
<div class="col">
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="col">
<div class="cell">
1111
</div>
</div>
<div class="col">
<div class="cell">
11111111
</div>
</div>
</div>
</div>
</div>
I'm trying to center some inputs inside a table and set a size to this td using bootstrap (on angularjs) but I can't make it work !
What I have now:
<div class="container">
<form class="form" data-ng-submit="salvarPartida()">
<table class="table table-bordered" align="center">
<tr data-ng-repeat="partida in partidas | filter : {fase : fase}">
<td style="height: 30px; text-align: right; font-size: 10pt;">{{partida.time1.nome}}
<img data-ng-src="/images/bandeiras/{{partida.time1.imgNumber}}.png" style="vertical-align: middle;">
</td>
<td class="col-sm-6">
<div class="col-xs-3" >
<input type="text" class="form-control">
</div>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
</td>
<br>
<td style="height: 30px; text-align: left; font-size: 10pt;"><img src="/images/bandeiras/{{partida.time2.imgNumber}}.png" title="{{partida.time2.nome}}"
style="vertical-align: middle;"> {{partida.time2.nome}}</td></tr>
</table>
<button class="btn btn-primary btn-block" type="submit">Salvar</button>
<br>
<br>
</form>
</div>
Which looks like:
But my expectations are :
Nevermind the color styles, I'd like just to proper align all fields !
I've tried using align="center" on the , class="text-align" inside the td class, also tried creating a nested into this using the previous text-center class but no luck !
My jsfiddle: fiddle
Thanks so much.
Centering <td> using bootstrap is simple:
horizontally:
<td class="text-center">
vertically:
<td class="align-middle">
Can you try this:
HTML
<div class="container m-con">
<form class="form" data-ng-submit="salvarPartida()">
<table class="table table-bordered">
<tr data-ng-repeat="partida in partidas | filter : {fase : fase}">
<td class="col-sm-4 col-xs-4">
<div class="row m-row">
<div class="col-xs-12 col-sm-4 col-lg-4 col-sm-push-8 text-right">
<img src="http://placehold.it/50x50" alt="" height="50" width="50" />
</div>
<div class="col-xs-12 col-sm-8 col-lg-8 col-sm-pull-4 m-text text-right">
Brazil
</div>
</div>
</td>
<td class="col-sm-4 col-xs-4">
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6">
<input type="text" class="form-control" />
</div>
<div class="col-xs-6 col-sm-6 col-lg-6">
<input type="text" class="form-control" />
</div>
</div>
</td>
<td class="col-sm-4 col-xs-4">
<div class="row m-row">
<div class="col-xs-12 col-sm-4 col-lg-4 text-right">
<img src="http://placehold.it/50x50" alt="" height="50" width="50" />
</div>
<div class="col-xs-12 col-sm-8 col-lg-8 m-text text-left">
Brazil
</div>
</div>
</td>
</tr>
</table>
<button class="btn btn-primary btn-block" type="submit">Salvar</button>
</form>
</div>
CSS
.m-con {
margin: 20px;
}
.m-text {
font-size: 16px;
padding-top:15px;
font-weight:bold;
}
.m-con td {
vertical-align:middle !important;
}
#media screen and (max-width:765px) {
.m-row > div {
text-align:center;
}
}
http://jsfiddle.net/vea5G/2/
//use td is padding
td{
vertical-align:middle;
padding:10px 20px;
width:1000px;
}
Try adding up custom CSS:
HTML
<div class="col-xs-3 max-center" >
<input type="text" class="form-control">
</div>
<div class="col-xs-3 max-center">
<input type="text" class="form-control">
</div>
CSS
.max-center {
text-align:center;
}
You can also try adding additional padding to the cells on the sides, but I'm not sure how much because I don't have the images. Just be careful, it can mess up the layout.