i have a table with toggle switches, and i need them to be on or off according to the state i get on another column. Thing is i can't make it work, because the buttons are all disabled except the first one and the toggle is always off, no matter the state i'm getting.
Here's the stackblitz of what i'm currently trying: https://stackblitz.com/edit/angular-ivy-aje3j9?file=src/app/app.component.html
remove id="{{item}}" and bind the item for the id
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<table class="table table-striped table-bordered dt-responsive nowrap table-hover">
<thead>
<tr>
<th class="align-middle text-center">Agencia</th>
<th class="align-middle text-center">Flag</th>
<th class="align-middle text-center">Estado</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of flagEstadoAll; let item = index;" class="btn-off">
<td class="align-middle text-center">{{data.nombre_comercial}}</td>
<td class="align-middle text-center">{{data.nombre}}</td>
<td class="align-middle text-center">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" [id]="item">
<label class="custom-control-label" [for]="item">{{data.estado_flag == 'Activo' ? 'Desactivar' : 'Activar'}}</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
it should be work
Related
The second div showing the table headers is not stretching as much as the one above and they are all in a container-fluid.
I've tried d-flex, flex-grow-1, but I believe it stretches it vertically.
I took <div class="col"> off and the table occupies the container width wise, but then the last colun (right side) "disappears":
<div class="row" id="tableDiv">
<div class="col">
<div id="po-items" class="table-responsive">
<div class="card" id="card">
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:7%">Prenda</th>
<th style="width:10%;">Cliente</th>
<div class="container-fluid" id="container2">
<div class="row d-flex flex-wrap align-items-center align-items-stretch">
<div class="col padding-0">
<div id="supplierTable" class="table-responsive">
<table class="table table-borderless" id="supplier">
<thead style="white-space: nowrap">
<tr>
<th class="text-center">Proveedor</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<select id="selectSupplier" name="select" required="required" class="custom-select" onchange="loadAddress('supplier', this);generatePoNumber('new', selectedSupplier(), '', selectedOrderPo());loadBuyersFromSS('','');loadItems('','','supplier','new','Corte')">
<option value=""></option>
<option value="artico"></option>
<option value="misura"></option>
</select>
</td>
</tr>
<tr>
<td class="address"><br></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col padding-0">
<div id="buyerTable" class="table-responsive">
<table class="table table-borderless" id="buyer">
<thead style="white-space: nowrap">
<tr>
<th class="text-center">Comprador</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<select id="selectBuyer" name="select" required="required" class="custom-select" onchange="loadAddress('buyer', this)">
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td class="address"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col padding-0">
<div id="billToTable" class="table-responsive">
<table class="table table-borderless" id="billTo">
<thead style="white-space: nowrap">
<tr>
<th class="text-center">Facturar</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<select id="selectBillTo" name="select" required="required" class="custom-select" onchange="loadAddress('billTo', this)">
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td class="address"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row" id="tableDiv">
<div class="col">
<div id="po-items" class="table-responsive">
<div class="card" id="card">
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:7%">Prenda</th>
<th style="width:10%;">Cliente</th>
<th style="width:14%">Referencia</th>
<th style="width:14%">Tela</th>
<th style="width:10%">Color</th>
<th style="width:4%">OS</th>
<th style="width:4%">XS</th>
<th style="width:4%">S</th>
<th style="width:4%">M</th>
<th style="width:4%">L</th>
<th style="width:4%">XL</th>
<th style="width:4%">2XL</th>
<th style="width:4%">3XL</th>
<th style="width:5%">Total</th>
<th style="width:5%">Precio sin IVA</th>
<th style="width:5%">Precio Total sin IVA</th>
<th style="width:3%">Sel.</th>
</tr>
</thead>
<tbody id="tableRows">
Have you tried placing the second div="col" within a div="row" ?
In my VueJS application I am building an invoice form using Bootstrap 4, I am using this code snippet and everything has been great so far but the problem is that, when it comes to styling a UI I kind of suck at the moment :)
The problem here is that the bottom totals part is floating to the left instead of to the right. This code snippet has been taken from a Bootstrap 3 code snippet samples and I am using Bootstrap 4 so probably this is the issue. However, I've tried converting it to Bootstrap 4 using online converters but none of them helped me. I would appreciate your help.
This is the code that I want to float to the right.
<div class="row clearfix" style="margin-top:20px">
<div class="float-right col-lg-4">
<table class="table table-bordered table-hover" id="tab_logic_total">
<tbody>
<tr>
<th class="text-center">Sub Total</th>
<td class="text-center">
<input type="number" name="sub_total" placeholder="0.00" class="form-control" id="sub_total" readonly>
</td>
</tr>
<tr>
<th class="text-center">Tax</th>
<td class="text-center">
<div class="input-group mb-2 mb-sm-0">
<input type="number" class="form-control" id="tax" placeholder="0">
<div class="input-group-addon">%</div>
</div>
</td>
</tr>
<tr>
<th class="text-center">Tax Amount</th>
<td class="text-center">
<input type="number" name="tax_amount" id="tax_amount" placeholder="0.00" class="form-control" readonly>
</td>
</tr>
<tr>
<th class="text-center">Grand Total</th>
<td class="text-center">
<input type="number" name="total_amount" id="total_amount" placeholder="0.00" class="form-control" readonly>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You could use offset for responsively offsetting the columns. Since the container of #tab_logic_total table is taking up 4 columns, we have 8 left, so:
<div class="row clearfix" style="margin-top:20px">
<!-- Notice this line: We are offsetting the table by 8 columns -->
<div class="col-lg-4 offset-lg-8">
<table class="table table-bordered table-hover" id="tab_logic_total">
<tbody>
<tr>
<th class="text-center">Sub Total</th>
<td class="text-center">
At this point, we no longer need the float-right class. It won't have any effect on flexbox anyway.
Further readings:
Bootstrap Grid system
I have this picture below that I want to convert into web from a windows. I manage to do the design but I have a problem in the grid (I am using data tables in bootstrap) I can't do the design in what in the picture like.
<table>
<tr>
<td>
<div>
<input type="radio" />
Radio Button
</div>
</td>
<td>
<input type="radio" />
Radio Button
</td>
</tr>
<tr>
<td>
<div>
<input type="text" />
</div>
</td>
<td>
< div>
< input type="button" />
</div>
</td>
</tr>
</table >
<table >
<tr>
<td>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
< i class="fa fa-list fa-fw" >< / i >Table
< /div >
< /div>
< /div>
< !-- /.panel-heading -->
< div class="panel-body">
< div class="dataTable_wrapper">
< table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dataTables-xxxx">
</table>
</div>
</div>
</div>
</div>
< /div>
</td>
<td>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
< i class="fa fa-list fa-fw"></i>Table
< /div>
< /div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dataTables-xxasdxx">
</table>
< /div>
< /div>
< /div>
< /div>
< /div>
</ td>
< /tr>
< /table>
My 2 Images bellow:
Try the below design hope it helps.You can customize the column property as your desire I just added the basic skeleton.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row">
<div class=" col-sm-12 form-group">
<div class=" col-sm-2">
<input type="radio" />
Radio Button
</div >
<div class=" col-sm-2">
<input type="radio" />
Radio Button
</div >
</div >
<div class=" col-sm-12 form-group ">
<div class=" col-sm-2">
<input type="text" class="form-control" id="usr">
</div>
<div class=" col-sm-2">
<button type="button" class="btn btn-default">Submit</button>
</div>
</div>
<div class="table-responsive col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Or See the below fiddle for a better look
table design demo fiddle (updated)
You can also, do something like this instead of using tables for layout and mimic as close as to your conversion UI.
table tags are meant primarily for data formatting. Bootstrap has the concept of grid layout which is meant for laying out your UI without using tables.
When you open the snippet in full screen, you would see the exact replica. However, when the screen is too small to fit in your entire content, it just wraps into the next row, giving you the flexibility to build responsive layout, which is not possible with table tags.
.custom-margin {
margin-top: 10px;
margin-bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-container">
<div class="radio">
<label class="radio-inline">
<input type="radio" name="" id="optionsRadiosOne" value="optionOne">Radio Button One
</label>
<label class="radio-inline">
<input type="radio" name="" id="optionsRadiosTwo" value="optionTwo">Radio Button Two
</label>
</div>
<div class="custom-margin">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Enter Email :</label>
<input type="text" class="form-control" placeholder="Enter Email">
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>
</div>
<div class="row">
<div class="col-lg-3">
<table class="table table-hover">
<tr>
<td>Header One
</td>
<td>Header Two
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
</table>
</div>
<div class="col-lg-6">
<table class="table table-hover">
<tr>
<td>Header One
</td>
<td>Header Two
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
</table>
</div>
</div>
</div>
i am trying to set th width but it change only desktop view.
if i open that page in mobile table th not properly set.
i have also try col-xs-2 to fix th but it is not work
<div class="form-group col-lg-12 col-md-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-xs-12 col-md-offset-1">
<div class="row" >
<div class = "table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr class="info">
<th class="col-md-2 col-xs-2" > No</th>
<th class="col-md-4 col-xs-4">Dish Name</th>
<th class="col-md-2 col-xs-2"> Size</th>
<th class="col-md-2 col-xs-2">Prize</th>
<th class="col-md-2 col-xs-2">Order</th>
</tr>
</thead>
<tbody>
<tr title="Order Chicken Kadhai">
<td >1</td>
<td >Chicken Kadhai</td>
<td >Full</td>
<td >150/-</td>
<td ><input type="button" class="btn btn-info" value="ORDER"> </td>
</tr>
<tr>
<td >2</td>
<td >Chicken Roast</td>
<td >Full</td>
<td >250/-</td>
<td ><input type="button" class="btn btn-info" value="ORDER"> </td>
</tr>
<tr>
<td >3</td>
<td >Chicken Tandori</td>
<td >Full</td>
<td >350/-</td>
<td ><input type="button" class="btn btn-info" value="ORDER"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
how can we set th to responsive table
From comments:
columns are not made for use in tables. .table-responsive adjusts
itself according to the content.
use this code might be help for you
<div class="table-responsive">
<table class="table">
...
</table>
</div>
write <class=".table-responsive>" instead of class=<class="table-responsive>"
I'm wondering how to enable checkbox in table header and table data of Bootstrap 3. Here is what I did in my code:( modified from Bootstrap example)
<div class="box-body table-responsive">
<table id="example1" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
</label>
</div>
</th>
<th>用户id</th>
<th>姓名</th>
<th>电邮</th>
<th>组别</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
Here is the result:
As you see, the checkbox in header is now shown. And the checkbox in table data is not enabled (not clickable). Does anybody have example code to implement checkbox function?