I have three divs(panels) on one page. In two panels there are tables and when i open that page on smaller display it breaks design. So i wonder is it possible to add some button on panels for collapsing so that user can collapse panels that he doesn't need when open page on smaller display.
Here is my HTML code:
<div class="row">
<div class="col-md-2">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory
</div>
<div class="panel-body">
<img file-url="logo" thumbnail="true" class="img-logo" ng-show="logo"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory centers
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" ng-table="centersTable">
</table>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory services
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
</table>
</div>
</div>
</div>
</div>
</div>
It would be great if that button could be in panel-heading on right place and when user click on it it hide that panel and if it click again it open panel.
I was looking something on internet but i couldn't find anzthing that could help me.
P.S. I'm using AngularJS if that is important for this.
Could someone pls help me with this problem ?
I am including tr tag and td tag inside the table tag
also adding CSS(margin-top or margin-bottom) for the respetive Div
you can check below code
var app = angular.module('myApp', []);
app.controller('customersCtrl', function() {
});
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
.marginTop{
margin-top:25px;
}
.marginBottom{
margin-bottom:25px;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div class="row">
<div class="col-md-2">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory
</div>
<div class="panel-body">
<img file-url="logo" thumbnail="true" class="img-logo" ng-show="logo" />
</div>
</div>
</div>
<div class="col-md-4 marginTop">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory centers
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
<tr>
<td>your table1 data1</td>
<td><button>button1</button></td>
</tr>
<tr>
<td>your table1 data2</td>
<td><button>button2</button></td>
</tr>
<tr>
<td>your table1 data3</td>
<td><button>button3</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-6 marginTop">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory services
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
<tr>
<td>your table2 data1</td>
<td><button>button1</button></td>
</tr>
<tr>
<td>your table2 data2</td>
<td><button>button2</button></td>
</tr>
<tr>
<td>your table2 data3</td>
<td><button>button3</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have three divs, where the first two have to be fixed and the third scroll. I'm doing it this way:
.topo2 {
position: fixed;
width: 95%;
z-index: 10;
top: auto;
bottom: auto;
}
.topo6 {
position: fixed;
width: 95%;
z-index: 10;
bottom: auto;
}
.acerto{
overflow:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topo2">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="zero-clipboard"><h3><span class="btn-clipboard with-example" style="color:#03a9f4">ORÇAMENTOS</span></h3></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="topo6">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="box-table">
<table id="taborc3" class="table">
<thead>
<tr>
<th class="table__heading acerto2"><i class="fa fa-pencil"></i></th>
<th class="table__heading acerto3">Orçamento</th>
<th class="table__heading acerto4">Referência</th>
<th class="table__heading acerto5">Designação</th>
<th class="table__heading acerto6">Quantidade</th>
<th class="table__heading acerto7">Unidade</th>
<th class="table__heading acerto8">Preço Unitário</th>
<th class="table__heading acerto9">Valor</th>
<th class="table__heading acerto10">Nota de Encomenda</th>
<th class="table__heading acerto11">Fornecedor</th>
<th class="table__heading acerto12">Previsão de Entrega</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="container-fluid acerto">
<div class="row">
<div class="col-md-12">
<div class="content1">
<table id="taborc1" class="table">
<tbody>
</tbody>
</table>
<button type="button" class="btn btn-raised btn-default ripple-effect" id="taborc2" style="float: right;" onclick="update_orped(); ins_orped(); update_entreg();">Gravar <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
But the first two divs that have to be fixed are on top of each other.
I intend the second div to be after the first div and not on top of the other. I know that if you set the top property in the css and manually adjust it with it, but the first and second dives are not always the same height.
They can have two lines with having ten lines. How do I dynamically distinguish this so that the second div appears after the first without using the top property?
I've tried the bottom and margin-bottom properties but they don't work
Add a 'wrapper' element around the first two fixed divs, and set that one to fixed.
<div class="fixed-container">
<div class="topo2">...</div>
<div class="topo6">...</div>
</div>
.fixed-container{
position: fixed;
}
(function ($) {
$(function () {
$( window ).resize(function() {
setPadding();
});
setPadding();
function setPadding() {
let pad = ($('.fixed-container').height() + 10) + 'px';
$('.acerto').css('padding-top', pad);
}
});
})(jQuery);
.fixed-container{
position: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed-container">
<div class="topo2">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="zero-clipboard"><h3><span class="btn-clipboard with-example" style="color:#03a9f4">ORÇAMENTOS</span></h3></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="topo6">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="box-table">
<table id="taborc3" class="table">
<thead>
<tr>
<th class="table__heading acerto2"><i class="fa fa-pencil"></i></th>
<th class="table__heading acerto3">Orçamento</th>
<th class="table__heading acerto4">Referência</th>
<th class="table__heading acerto5">Designação</th>
<th class="table__heading acerto6">Quantidade</th>
<th class="table__heading acerto7">Unidade</th>
<th class="table__heading acerto8">Preço Unitário</th>
<th class="table__heading acerto9">Valor</th>
<th class="table__heading acerto10">Nota de Encomenda</th>
<th class="table__heading acerto11">Fornecedor</th>
<th class="table__heading acerto12">Previsão de Entrega</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="container-fluid acerto">
<div class="row">
<div class="col-md-12">
<div class="content1">
<table id="taborc1" class="table">
<tbody>
</tbody>
</table>
<button type="button" class="btn btn-raised btn-default ripple-effect" id="taborc2" style="float: right;" onclick="update_orped(); ins_orped(); update_entreg();">Gravar <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
$(window).on('load resize', function(){
var fixedCon = $('.fixed-container').outerHeight();
$('.acerto').css('margin-top',fixedCon);
});
.fixed-container{
position: fixed;
width: 95%;
z-index: 10;
top: 0;
}
.acerto{
overflow:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed-container">
<div class="topo2">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="zero-clipboard"><h3><span class="btn-clipboard with-example" style="color:#03a9f4">ORÇAMENTOS</span></h3></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="topo6">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="content">
<div class="box-table">
<table id="taborc3" class="table">
<thead>
<tr>
<th class="table__heading acerto2"><i class="fa fa-pencil"></i></th>
<th class="table__heading acerto3">Orçamento</th>
<th class="table__heading acerto4">Referência</th>
<th class="table__heading acerto5">Designação</th>
<th class="table__heading acerto6">Quantidade</th>
<th class="table__heading acerto7">Unidade</th>
<th class="table__heading acerto8">Preço Unitário</th>
<th class="table__heading acerto9">Valor</th>
<th class="table__heading acerto10">Nota de Encomenda</th>
<th class="table__heading acerto11">Fornecedor</th>
<th class="table__heading acerto12">Previsão de Entrega</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="container-fluid acerto">
<div class="row">
<div class="col-md-12">
<div class="content1">
<table id="taborc1" class="table">
<tbody>
</tbody>
</table>
<button type="button" class="btn btn-raised btn-default ripple-effect" id="taborc2" style="float: right;" onclick="update_orped(); ins_orped(); update_entreg();">Gravar <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
First you need to store top div height in variable after then you can add top using stored value on window load and resize function so it will automatic set top position according to first div height. Please check demo.
<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;
}
I have html code which is used to display two tables. When I run the program the two tables appear one below the other, but I want the two tables to be on the extreme left.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50px;
margin-left: auto;
margin-right: auto;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 20px;
}
#table {
margin-left: -850px;
}
</style>
<body style="background-color: #E6E6FA">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="jiratable" style="display: none;">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table id="Jira_table" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="sendmail" style="display: none;">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" style='margin-right:16px' class="btn btn-
primary btn-lg pull-right">Cancel</button>
<button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>
The output is:
Number Name UserId count
1 Ram 56782 1
2 Raj 56187 2
Expected Output is:
Number Name UserId count
1 Ram 56782 1
2 Raj 56187 2
Here for sample I am writing only one table output, but in actuality there are two tables each, one below the other.
Just remove the margin-left and margin-right. You can also remove the width because tables always automatically are as wide as their content and there's nothing you can do about it.
body {
background-color: #E6E6FA;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 20px;
}
#table {
margin-left: -850px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="jiratable">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table id="Jira_table" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="sendmail">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" style='margin-right:16px' class="btn btn-
primary btn-lg pull-right">Cancel</button>
<button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>
</div>
</div>
Use float property. In this case, you want to float your element to the left.
<!DOCTYPE html>
<html>
<head>
<style>
table{
font-family:arial,sans-serif;
border-collapse: collapse;
width:50px;
margin-left: auto;
margin-right: auto;
float:left;
}
td,
th{
border:1px solid #dddddd;
text-align: center;
padding: 20px;
}
#table {
margin-left: -850px;
}
</style>
<body style="background-color: #E6E6FA">
<div class="container text-center" >
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading" >Reportees List</div>
<table id = "employee_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id ="jiratable" style="display: none;">
<div class="container text-center" >
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table id = "Jira_table" class="table table-hover"
cellspacing="0">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id ="sendmail" style="display: none;">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id ="sendMail" style='margin-right:16px' class="btn btn-
primary btn-lg pull-right">Cancel</button>
<button id ="sendMail" class="btn btn-primary btn-lg pull-right"
onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>
I'm not sure how to exactly describe this problem, but in conclusion if my Bootstrap panel contains data, then 2nd one is pushed down a bit. I have attached a picture below of it happening.
enter image description here
Panel on left HTML
<div class="panel panel-default text-left fw-6" style="overflow: hidden;">
<div class="panel-heading">
<h3 class="panel-title"><b>Stats</b></h3>
</div>
<div class="panel-body">
<div class="info" style="text-align: center; font-weight: bold; font-size: 30px">data</div>
<div class="break" style="height: 1px; background-color: black; overflow: hidden; margin: 9px"></div>
<div class="totalBet" style="text-align: center; font-weight: bold; font-size: 16px;">data</div>
<div class="totalProfit" style="text-align: center; font-weight: bold; font-size: 16px;">data</div>
</div>
</div>
Panel on right
<div class="panel panel-default text-left fw-6" style="overflow: hidden;">
<div class="panel-heading">
<h3 class="panel-title"><b>Transactions</b></h3>
</div>
<div class="panel-body">
<table class="table table-striped no-footer">
<tbody>
<tr>
<th>ID</th>
<th>Type</th>
<th>Amount</th>
<th>Time</th>
<th>Transaction Hash</th>
</tr>
</tbody>
</table>
</div>
</div>
expected
I'm trying set 100% height in the nested row with the code below:
<div class="row">
<div class="col-md-4">
<!--This is not working-->
<div style="height:100%">
First Column, First Cell
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-xs-12">
Second Column, First Cell
</div>
<div class="col-xs-12">
Second Column, Second Cell
</div>
<div class="col-xs-12">
Second Column, Third Cell
</div>
</div>
</div>
</div>
But it output as
output
You can use Bootstrap Tables instead of rows and columns.
UPD. I've added coloured outlines for cells.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
td {
border: 0 !important;
outline: 4px solid;
outline-offset: -8px;
padding: 16px !important;
}
.red-box {
outline-color: red;
}
</style>
<div class="container">
<table class="table">
<tr>
<td rowspan="3" class="red-box">First Column, First Cell</td>
<td>Second Column, First Cell</td>
</tr>
<tr>
<td>Second Column, Second Cell</td>
</tr>
<tr>
<td>Second Column, Third Cell</td>
</tr>
</table>
</div>
I would suppose you're doing it in two column layout, you can do that using bootstrap by setting the parent div with height so that.
<div style="height=100%;">
First Column, First Cell
</div>
has the basis of 100% property,
For example:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6" style="height: 100px;">
<div class="row" style="height: 100px;">
<div class="col-md-12" style="height: 100px;">
<div style="height:100%;border: 1px solid black;">
First Column, First Cell
</div>
</div>
</div>
</div>
<div class="col-md-6" style="height: 100px;border: 1px solid black;">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-xs-12">
Second Column, First Cell
</div>
<div class="col-xs-12">
Second Column, Second Cell
</div>
<div class="col-xs-12">
Second Column, Third Cell
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this help