I want to place the #second_row div at the bottom of the page. I've tried different solutions but none of them works.
#second_row {
position: fixed;
margin: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TH1</th>
</tr>
</thead>
</table>
</div>
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TH1</th>
<th style="background-color: transparent">TH2</th>
<th style="background-color: transparent">TH3</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="row" id="second_row">
<div class="col-md-4">
Left
</div>
<div class="col-md-4">
Middle
</div>
<div class="col-md-4">
Right
</div>
</div>
</div>
For fixed position to appear in bottom you have to mention the position also like top, right, left, bottom. and there is no need of margins with fixed positioned element
So your code will work like this::
#second_row {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Related
I have a large amount of data to style. It comes in for each file rather and each type and needs to be displayed in a grid/table way, however due to the html it is causing problems. Some of the data rows are blank and others go over multiple lines.
I can't use a table as this would mean that the cells are going to go horizontal instead of vertical
See fiddle
https://jsfiddle.net/r5aj7kse/
.data {
display: flex
}
.dataColumn {
flex-grow: 1;
flex-basis: 0;
}
.dataRow {
border-bottom: 1px solid #000;
padding: 4px;
}
<div class="data">
<div class="dataColumn">
<div class="dataRow">A</div>
<div class="dataRow">B</div>
<div class="dataRow"></div>
<div class="dataRow">D</div>
</div>
<div class="dataColumn">
<div class="dataRow">A<br>A</div>
<div class="dataRow">B</div>
<div class="dataRow">C</div>
<div class="dataRow">D</div>
</div>
I need all of the cells to match up. I have tried using flex and the only way I can get it to work is to add a fixed height to the cells but this is problematic as i lose alot of data this way
Use table instead of div.
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #c6c7cc;
padding: 10px 15px;
}
th {
font-weight: bold;
}
<table>
<thead>
<tr>
<th scope="col" colspan="1">Item</th>
<th scope="col">Qty</th>
<th scope="col">table</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>1</td>
<td>text</td>
</tr>
<tr>
<td>B</td>
<td>1</td>
<td>text</td>
</tr>
<tr>
<td>C</td>
<td>1</td>
<td>text</td>
</tr>
<tr>
<td>D</td>
<td>1</td>
<td>text</td>
</tr>
</tbody>
</table>
If it possible, you can arrange data in rows, like this:
<div class="data">
<div class="dataRow">
<div class="dataCol">A</div>
<div class="dataCol">A</div>
<div class="dataCol">A</div>
</div>
<div class="dataRow">
<div class="dataRow">B</div>
<div class="dataRow">B</div>
<div class="dataRow">B</div>
</div>
<div class="dataRow">
<div class="dataRow">C</div>
<div class="dataRow">C</div>
<div class="dataRow">C</div>
</div>
<div class="dataRow">
<div class="dataRow">D</div>
<div class="dataRow">D</div>
<div class="dataRow">D</div>
</div>
</div>
but better choice use <table> for big data-table
I tried to reduce the height of bootstrap's progress bar but the issue is how can I make it in the center vertically same line as the text beside it. You can see the below sample with a reduced height progress bar that has a margin like or empty space below it.
.progress-num {
float: left;
margin-right: 1em;
}
.progress {
height: 0.5em !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
<td>
<span class="progress-num">8/10</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only"></span>
</div>
</div>
</td>
</tr>
</table>
Or just wrap the text and the bar in a containing element:
<table class="table">
<tr>
<td>
<div class="progress-stuff">
<span class="progress-num">8/10</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only"></span>
</div>
</div>
</div>
</td>
</tr>
</table>
And the CSS (no need for magic numbers for margins):
.progress-stuff {
display: flex;
align-items: center; /* ensure all elements vertically aligned */
}
.progress-num {
margin-right: 1rem;
}
.progress {
flex: 1; /* ensure bar fills remaining horizontal space */
}
Just setting using margin-top
.progress-num {
float: left;
margin-right: 1em;
}
.progress {
height: 0.5em !important;
margin-top: 7px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
<td>
<span class="progress-num">8/10</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only"></span>
</div>
</div>
</td>
</tr>
</table>
You can also embed the text within the progress bar, in case you do not insist on having a height of 0.5em. Just remove the class sr-only from your inner span element and move the text 8/10 to that element. There is no need for adjusting the text then, because it will always be within the progress bar.
You can even omit the inner span completely, if you do not want to apply any additional styling. I kept it in my code snippet, because it keeps the code more structured:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span>8/10</span>
</div>
</div>
</td>
</tr>
</table>
In ANY case, even if you keep your label outside of the progress bar, fill the <span class="sr-only"></span> with content, e.g. <span class="sr-only">8/10</span>. The sr-only stands for screenreader-only, i.e. visitors with visual impairments rely on the text within that element!
Even though you cannot see it on screen, other people need that information in order to tell, how far the action progressed.
I have the following panel:
And what I want is to centralize the circle charts inside the td of my table and keep it centralized when it turns to mobile. I'm having some issues trying to do that. This is how my code is:
<div class="portlet-body row">
<div class="col-lg-12">
<h3 class="nome-rv"><i class="fa fa-user"></i> <?=$_SESSION['nomeCompleto']?></h3>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p100 orange big">
<span>100%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>PISO</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p82 big">
<span>82%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>META</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p63 green big">
<span>63%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>SUPERMETA</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
</div>
There are some classes but I'm not using them by now.
Link to codepen: http://codepen.io/anon/pen/apNrxy
Any suggestion? Thanks!
It's easy to do if you can leverage flexbox (See browser compatibility here).
If you're using Bootstrap version 4, you can just wrap the content with:
<div class="d-flex justify-content-around">...</div>
See the documentation for more information.
If you're using Bootstrap version 3, you can still use the flexbox styles directly:
display: flex;
justify-content: space-around;
Update your CSS to this
.c100 {
position: relative;
font-size: 120px;
width: 1em;
height: 1em;
border-radius: 50%;
/* float: left; */
margin: 0 auto 0.1em auto; /* margin: 0 0.1em 0.1em 0; */
background-color: #cccccc;
}
I have a question regarding to the title.
I have looked through other question and tried their bootply to make sure that these are possible (using column grid to set the size of the column). However, my case might be more complicated than that and that's why the grid system doesn't work as I think it should be. Can you give me a hand on telling me what I should do?
Code:
<div class="container-fluid">
<div id="wrapper">
<table class="table table-striped" id="table">
<thead>
<th class="col-xs-1">ID</th>
<th class="col-xs-2">Name</th>
<th class="col-xs-2">Phone</th>
<th class="col-xs-2">Email</th>
<th class="col-xs-2">University</th>
<th class="col-xs-2">Course</th>
<th class="col-xs-1">Visa Catergory</th>
<th class="col-xs-10">Age</th>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
</div>
CSS for wrapper:
#wrapper {
width: 600px;
overflow-x: scroll;
}
The problem was quite simple:
I have col-xs-10 in the column Age, but the size of it doesn't care about what number I put in there and (I think) just try to wrap up the content
I have overflow-x
The column total add up is more than 12
Width of one BS-grid cell is always 8.33% of total width of parent. 22 cells will occupy 183%. By default all cells after 100% of parent width wrap into next line. As soon as you use table, all of its <td> in one row will be aligned horizontally despite of their width. So browser draws this collision as it can, thus last table cell wil be shrinked. I think that bootstrap isn't a table format tool. It's rather a table's look beautifier. So (I think) it's better to use set of <div>-s for table structure rendering.
It seems BS has no classes to format table as you wish.
Anyway for defining table cells dimensions you can use colspan. If total of grid cells in your chunk of code is 22, then you need to define row containing 22 cells as a structure base. Look at snippet (border added for better visualization)
#wrapper {
width: 600px;
overflow-x: scroll;
margin: 0 auto;
}
table td, th, thead {
border: 1px solid orange;
}
.formatter > td {
width: 4.5%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
<div style="width: 183%;">
<table class="table table-striped" id="table">
<thead>
<tr>
<th>ID</th>
<th colspan='2'>Name</th>
<th colspan='2'>Phone</th>
<th colspan='2'>Email</th>
<th colspan='2'>University</th>
<th colspan='2'>Course</th>
<th>Visa Catergory</th>
<th colspan='10'>Age</th>
</tr>
</thead>
<tr class="formatter">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody id="data">
</tbody>
</table>
</div>
</div>
And here is solution using div-s styled with bootstrap classes:
#wrapper {
width: 600px;
overflow-x: scroll;
margin: 0 auto;
}
div[class^="col-xs-"] {
border: 1px solid orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
<div style="width: 171%;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-7">
<div class="row">
<div class="col-xs-1">ID</div>
<div class="col-xs-2">Name</div>
<div class="col-xs-2">Phone</div>
<div class="col-xs-2">Email</div>
<div class="col-xs-2">University</div>
<div class="col-xs-2">Course</div>
<div class="col-xs-1">Visa Catergory</div>
</div>
</div>
<div class="col-xs-5">
<div class="row">
<div class="col-xs-12">Age</div>
</div>
</div>
</div>
</div>
</div>
</div>
And here is one more variant of compact render, based on color diference:
#wrapper {
width: 600px;
margin: 0 auto;
}
div[class^="col-xs-"] {
border: 1px solid orange;
box-sizing: border-box;
background: #99b;
}
div.subrow {
background: #cce;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div id="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-1">ID</div>
<div class="col-xs-2">Name</div>
<div class="col-xs-2">Phone</div>
<div class="col-xs-2">Email</div>
<div class="col-xs-2">University</div>
<div class="col-xs-2">Course</div>
<div class="col-xs-1">Visa</div>
<div class="col-xs-12 subrow">Age</div>
</div>
</div>
</div>
How to make display:table-cell style works (or look-alike alternative) if divs with style table-row are inside table cells? (see the link)
http://jsfiddle.net/ELKQg/460/
I'd like the container1 div behave like the container2.
code: (if the link were to become unreachable)
html:
<div id="container1" class="container">
<table>
<tr>
<td>
<div class="row">
<div class="cell">aaaa</div>
<div class="cell expand">b</div>
<div class="cell">c</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="cell">d</div>
<div class="cell expand">eeeee</div>
<div class="cell">f</div>
</div>
</td>
</tr>
</table>
</div>
<div id="container2" class="container">
<div class="row">
<div class="cell">aaaa</div>
<div class="cell expand">b</div>
<div class="cell">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell expand">eeeee</div>
<div class="cell">f</div>
</div>
</div>
css:
.container{width: 500px;overflow:hidden; /* instead of clearfix div */}
div { border:1px solid;padding: 1px;}
.row {display:table-row;}
.cell {display:table-cell;}
.expand{overflow:hidden;width:100%;}
The extra <table> containing your <div>s in .container1 needs to have width: 100%
display: table-cell elements don't necessarily need a containing display: table-row as long as the parent is display: table. Set the .row to that (ideally you'd re-name it, seeing as the rule no longer makes sense)
Fixed and forked your demo:
http://jsfiddle.net/barney/ahMg8/
Use display: table for the parent table before using display:table-cell
Use td's instead of divs inside tr:
<div id="container1" class="container">
<table>
<tr>
<td class="cell">aaaa</td>
<td class="cell expand">b</td>
<td class="cell">c</td>
</tr>
<tr>
<td class="cell">d</div>
<td class="cell expand">eeeee</td>
<td class="cell">f</td>
</tr>
</table>
</div>
Working fiddle