I'm trying to make a table that has rows that could expand and collapse on the press of a button, like in Windows Explorer, pressing the "plus" next to the folder will open the files in the directory.
Here's what I wrote:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../asset/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="../asset/css/trax.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Test Results</h3>
</div>
<div class="table-responsive">
<table class="table table-condensed table-hover">
<thead>
<tr>
<th class="col-md-7 text-left">Name</th>
<th class="col-md-1 text-right">Success</th>
<th class="col-md-1 text-right">Total</th>
<th class="col-md-1 text-right">Fail</th>
<th class="col-md-2 text-center">Trend</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">
<button type="button" class="btn btn-default btn- xs" data-toggle="collapse" data-target=".module,.first">
+
</button>
Foo
</td>
<td class="text-right up"><span class="glyphicon glyphicon-arrow-up"></span>80%</td>
<td class="text-right">5</td>
<td class="text-right">1</td>
<td class="text-center"><span class="inlinesparkline" values="1,2,8,4,5,7,10"></span></td>
</tr>
<tr class="collapse out module first">
<td class="text-left col-md-7">Hi</td>
<td class="text-right up col-md-1"><span class="glyphicon glyphicon-arrow-up"></span>95%</td>
<td class="text-right col-md-1">5</td>
<td class="text-right col-md-1">1</td>
<td class="text-center col-md-2"><span class="inlinesparkline" values="1,2,3,4,5"></span></td>
</tr>
<tr>
<td class="text-left">Bar</td>
<td class="text-right down"><span class="glyphicon glyphicon-arrow-down"></span>60%</td>
<td class="text-right">5</td>
<td class="text-right">2</td>
<td class="text-center"><span class="inlinesparkline" values="10,5,7,12,6,4,2"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="../asset/js/jquery-2.1.1.min.js" type="text/javascript"> </script>
<script src="../asset/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../asset/js/jquery.sparkline.js" type="text/javascript"> </script>
<script src="../asset/js/app.js" type="text/javascript"></script>
</body>
</html>
So, I managed to get the button to show a new row but it isn't arranged properly: the table cells don't arrange according to the table header cells like in other rows.
But when the button is pressed, during the transition, it arranges itself right before adjusting back to the wrong spacing.
Adding col-md-(number) to the cells as classes doesn't fix it.
Please tell me how to fix it / where I am going wrong.
That is a funny one. I found a similar question with an answer that appears to work. I created a jsFiddle that shows it working. Basically it involves adding your own CSS class that overrides the bootstrap CSS and forces it to display as a table row.
table .collapse.in {
display: table-row !important;
}
I can't say I particularly like the solution, especially the use of !important, but it works. There is anohter solution in the question I linked you to which involved adding a <div> to the <tr> with a class of collapsible but I disliked the sound of that even more.
Related
This shows my image in a small circle:
<div class="row">
<div class="col s1">
<img src="images/img1.jpg" alt="" class="circle responsive-img">
</div>
</div>
Now, I want to add the same image, in a table cell (td) and show it in a circle of the same size.
Should I copy/paste the above code as is inside the td ? It seems too verbose. Is there a simpler way?
Note: I know that a solution could be to write some custom css, but the reason why I use a css framework is to not write css, especially for common things like this.
You can just add the classes directly to the table elements like:
<tr class="row">
<td class="col s2">
<img src="src" alt="" class="circle responsive-img" />
</td>
</tr>
Here is an example:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<table>
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col s1">
<img src="https://i.stack.imgur.com/4iGwt.jpg?s=328&g=1" alt="" class="circle responsive-img" />
</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
There is no need to mix the grid system with the table. This will suffice:
<img height="30" width="30" class="circle" src="https://picsum.photos/50" alt="My Circular Image">
The .circle class in materialize just adds this CSS:
.circle {
border-radius: 50%;
}
The responsive-img class add this CSS:
img.responsive-img {
max-width: 100%;
height: auto;
}
This is to stop images breaking out of containers, and is of no help to you here. What you need to do is use a square image and control the height of the image inline, as shown above.
Codepen.
You can use a button circle and set image with tag responsive-img, example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div>
<table>
<thead>
<tr>
<th>Image</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="btn-floating waves-effect waves-light btn-tiny white">
<img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img">
</a>
</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
<tr>
<td>
<a class="btn-floating waves-effect waves-light btn-tiny white">
<img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img">
</a>
</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-6">Item 1.0</div>
<div class="col-lg-6">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-6">Item 2.0</div>
<div class="col-lg-6">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
This code creates a table where all items are in the same line. I have searched the css file but there is nowhere defined inline or inline-block, so I guess this is normal bootstrap behavior. What I am trying to achieve is to show items with prefix 1 one after another and same for items with prefix 2, but I want them all in same row. I have tried using <ul> with <li> elements, but they are also showed in the same line for some reason.
My table should contain only two columns and one header above them all. This is what I get now:
Issue is due to column classes - col-lg-6 which makes divs use equal width of parent td, use class col-lg-12 to use complete td width, please check the css of these classes below
.col-lg-12 {
width: 100%;
}
.col-lg-12 {
width: 50%;
}
Run below code
favorite
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-12">Item 1.0</div>
<div class="col-lg-12">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-12">Item 2.0</div>
<div class="col-lg-12">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
codepen for reference - https://codepen.io/nagasai/pen/xybpMm
I don't understand yet why you need to use bootstrap grid system inside the table when the td's are designed to work like that. You're also using col-lg-6 which is equivalent to 2 td's inside 1 tr since there is no collapse (lg).
You'll have a similar output if you use this code;
<h6>Default:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='2'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
</tr>
<tr>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h6>Two Columns Only:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='4'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
I'm using Bootstrap 4 with Datatables for jquery. Actually all works well for the datatables integration, but I have a little problem with the sidebar. I'm trying to add a sidebar to the left side of the datatables, this is the html that I'm using:
<div class="row">
<div class="col-12">
<div class="card">
<a data-toggle="collapse" href="#fixtures" role="button"
class="btn btn-rounded hide-btn btn-sm ml-1" aria-expanded="false" aria-controls="fixtures">
<i class="mdi mdi-view-agenda"></i>
</a>
<div class="card-body collapse show rounded-full-margin" id="fixtures">
<div class="container-fluid">
<div class="row">
<div class="col-3 px-1 bg-dark" id="sticky-sidebar">
<div class="py-2 sticky-top">
<div class="nav flex-column">
Sidebar
Link
Link
Link
Link
Link
</div>
</div>
</div>
<div class="col" id="main">
<h4 class="header-title text-center">Matches</h4>
<table id="fixtures-datatable" class="table dt-responsive nowrap">
<thead>
<tr>
<th class="sorting">League</th>
<th class="sorting">Hour</th>
<th class="sorting text-center">Home</th>
<th class="sorting text-center">Result</th>
<th class="sorting text-center">Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>BR,Brazil: Serie B</td>
<td>00:15</td>
<td class="text-right">
Guarani
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/316.png" height="20" />
</td>
<td class="text-center">0 - 2</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/307.png" height="20" />
Goiás
</td>
</tr>
<tr>
<td>BR,Brazil: Serie B</td>
<td>01:30</td>
<td class="text-right">
São Bento
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/6120.png" height="20" />
</td>
<td class="text-center">1 - 0</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/322.png" height="20" />
Paysandu
</td>
</tr>
<tr>
<td>BR,Brazil: Serie B</td>
<td>01:30</td>
<td class="text-right">
Juventude
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/314.png" height="20" />
</td>
<td class="text-center">0 - 1</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/305.png" height="20" />
Criciúma
</td>
</tr>
<tr>
<td>BR,Brazil: Serie B</td>
<td>00:15</td>
<td class="text-right">
Avaí
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/330.png" height="20" />
</td>
<td class="text-center">1 - 0</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/344.png" height="20" />
CRB
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- End card-body -->
</div>
</div>
</div>
as you can see I wrapped the sidebar and the datatables html inside a row(which is also inside a container-fluid) for have the elements in one row. Then, I created two columns to create the responsive layout, the problem is that I get the following:
As you can see the sidebar doesn't go to the left side of the datatables but goes to the top, and this is wrong.
I created a JSFIDDLE here.
Thanks for any help.
Add the stylesheet into your <head> and it seems to work fine with the menu bar on the left as expected.
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>
If you check the console, you'll see that the bootstrap stylings weren't showing up from the link you provided.
I have a Bootstrap responsive table in my AspNet Web API project which not showing me foot text within the table. My foot text shows on the top of the page outside table. I mean I'm trying to keep the footer of bootstrap modal to bottom but I can't, this is my html structure:
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="Countries">
<thead>
<tr>
<th>
CountryId
</th>
<th>
CountryName
</th>
<th class="col-md-2">
Action
</th>
</tr>
</thead>
<tbody class="tbody"></tbody>
<tfoot> All text I put here shows at the top of the page outside of the table</tfoot>
</table>
</div>
</div>
This is very simple because you didn't have defined any row in footer that's why. And also remember to use table-responsive class with table only rather then with div.
Look below code.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<div class="container">
<table class="table table-responsive table-bordered table-hover" id="Countries">
<thead>
<tr>
<th>
CountryId
</th>
<th>
CountryName
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody class="tbody"></tbody>
<tfoot>
<tr>
<td colspan="3">All text you were puting here was shown at the top of the page outside of the table but now it is not.</td>
</tr>
</tfoot>
</table>
</div>
I am doing a website about the property plan, my customer required that when their customer hover on the text, the image at the center will change, is there any method that can do by using only css?
<div>
<img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="imgcenter">
<table class="plantable">
<tbody>
<tr>
<td style="color:#469785;">Type <b>E</b></td>
<td style="color:#9BB8A0;">Type <b>F</b></td>
<td style="color:#9DB77F;">Type <b>G</b></td>
<td style="color:#9FA278;">Type <b>G1</b></td>
<td style="color:#C9AE77;">Type <b>H</b></td>
</tr>
</tbody>
</table>
</div>
When the user hover at Type E, the imgcenter will change to image E, when the user hover at Type G, the imgcenter will change to image G, how can i do that?
Here is the solution that i found which can be use
http://fiddle.jshell.net/tbz9nL4g/
<style>
.hover_image {position:relative;}
.hover_image .img1{position:absolute; display:none; z-index:99;}
.hover_image:hover .img1{display:block;}
.hover_image .img2{position:absolute; display:block; z-index:99;}
.hover_image:hover .img2{display:none;}
</style>
<div>
<a href="#" class="hover_image"> link text
<span class="img1"><img src="http://www.imagingshop.com/images/sharptone/hdr-2.jpg" /></span>
<span class="img2"><img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</span>
</a>
</div>
However there is some problem regarding this coding, which when I add another text, this code unable to work
http://fiddle.jshell.net/tbz9nL4g/2/
Use the data attribute to store data-img in a tag and use that on hover
//js
$('a').hover(function(e){
if(e.type==='mouseenter' || e.type==='mouseover'){
$('.imgcenter').prop({'src':$(this).data('img')});
}else if(e.type==='mouseleave'){
$('.imgcenter').prop({'src':$('.imgcenter').data('img')});
}
})
img{width:300px;height:300px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img data-img="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="imgcenter" />
<table class="plantable" border=1>
<tbody>
<tr>
<td style="color:#469785;"><a data-img="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" href="">Type <b>E</b></a></td>
<td style="color:#9BB8A0;"><a data-img="http://www.rodalesorganiclife.com/sites/rodalesorganiclife.com/files/images/animal_bird_300.jpg" href="">Type <b>F</b></a></td>
<td style="color:#9DB77F;"><a data-img="https://sanaakosirickylee.files.wordpress.com/2012/05/chirping-birds.jpg" href="">Type <b>G</b></a></td>
<td style="color:#9FA278;"><a data-img="http://img1.cookinglight.timeinc.net/sites/default/files/image/2005/09/0509p113-bird-m.jpg" href="">Type <b>G1</b></a></td>
<td style="color:#C9AE77;"><a data-img="http://orig10.deviantart.net/6a53/f/2012/074/3/0/profile_picture_by_birds_love_us_all-d4sv1v2.jpg" href="">Type <b>H</b></a></td>
</tr>
</tbody>
</table>
</div>