<div class="col-xs-6 col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Recently Filtered</div>
<table class="table table-striped">
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
</table>
</div>
</div>
The table inside a panel is overflowing when I zoom in, here's a picture example
What's the proper mark up accommodating this problem? I know that it can scale properly for sure.
You could always add .table-responsive class to the table to get it scroll horizontally. Example:
<div class="table-responsive">
<table class="table table-striped">
...
</table>
</div>
If that isn't what you're wanting, you'll need to lower the font size to make it fit better.
it appears to only happen when the viewport has responded down to mobile sizes. The easiest fix is to add overflow rule.
.panel {
overflow: auto;
}
you could also change font sizes or remove unneeded table cells. You could also abbreviate
ID
Temp
V
Date
Just an idea, you tryed to add a div with class panel-body around the table?
Related
I'm using one panel panel-defaul in my page to show some data but I need that the min-width of my panel be 720px if the Windows is resizing to less of 720px I need that appear a scrollX but the panel can´t be less of 720px like the use of table-responsive when I need to do something like that but using tables I do this:
HTML
<div class="example-table table-responsive">
<table id="example-table" class="table table-hover">
</table>
</div>
CSS
.example-table{
max-width: 720px;
}
#example-table{
min-width: 720px;
}
And if I use the rule .panel{min-widht:720px;} nothing happen.
How can I get the same effect in my panel?
EDIT: Ok I try this in jsfiddle and my exact problema is that no matter that I set the min-width: 760px the content in the panel-body that is the two col-sm-6 create two rows but I need that the two col-sm-6 keep the same two columns and not pass to be two rows, at the first I think that was because the min-weidth but now I don´t know why this happen even when the scrollX is created.
So according to your updated question, you want your columns to remain inline irrespective of screen width. You can do that by changing your col-sm-6 to col-xs-6 like this:
<div class="col-xs-6">
<strong>Something here</strong>
</div>
<div class="col-xs-6">
<strong>Something here</strong>
</div>
jsFiddle: https://jsfiddle.net/rvzy9s5k/1/
You can use media-querieslike this:
#media (min-width: 720px) {
.example-table {
<!-- Your css properties here -->
}
}
I'm having a hard time centering a table I've put inside a panel of an accordion slider on my website. The page I'm talking about is this:
http://www.smartcuts.ch/index-TEST.html#latest
My html is
<div class="container">
<div class="row">
<div class="col-xs-11">
<div class="table-responsive">
<table summary="This table shows our rates" class="table table-condensed table-striped">
Can I center the table within the panel using some command in this html or must I use CSS? If so, please enlighten me. I've tried all kinds of stuff but nothing seems to work.
Thanks a lot.
You have to:
remove the containerclass or eventually use .container-fluid
use col-xs-12 instead of col-xs-11.
Here is the working code:
<div><!-- removed class .container -->
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table summary="This table shows our rates" class="table table-condensed table-striped">
<!-- Table content here-->
</table>
</div><!--end of .table-responsive-->
</div>
</div>
</div>
FINAL RESULT:
You don't have to kill the container class, you can update it to .container-fluid. And you don't need to change .col-xs-11 to .col-xs-12.
You can add an ID to the .col-xs-11 div and override two styles to center the div instead of the table itself. I am assuming that you picked .col-xs-11 because you wanted that specific width, and since the table is responsive it's inheriting the width of the containing div.
HTML:
<div class="container-fluid">
<div class="row">
<div id="center-table" class="col-xs-11">
<div class="table-responsive">
CSS:
#center-table{
float: none;
margin: 0 auto;
}
Working JS fiddle example:
https://jsfiddle.net/joeydehnert/oczyocwp
I have the following dhtml skeleton
<div class="content">
<div class="container">
<div class="pull-right">
<a class="btn btn-primary" href="#">Press me</a>
</div>
<table class="table table-condensed table-bordered">
</table>
</div>
</div>
I want table to be centered on the page. I am using latest version of bootstrap. My table is a very large width table. Sizes of the divs as this is shown on my chrome dev console are.
.content: 1583x3803
.container: 1170x3803 (with 206.5 margin left and right)
.table: 1334x3753
So I see that my table needs more space than the container has. I thought that container centers the divs according to their size. Is there a way to make my table no matter it's width to always center inside a div?
I am using bootstrap for grid.
When the an column is expanded the other columns which are on right are aligning properly but the elements which are left to it are not aligning properly.
<div class="row">
<div class="repeater" ng-repeat="student in students | filter : query">
<div class="span{{12/columns}} col-sm-6 panel panel-warning">
<div class="panel-body">
<div class="row">
<div class="col-md-5"><img ng-src = "img/{{student.img}}" width="80px;" class="img-circle"></div>
<div class="col-md-7">
<button class="btn btn-info" style="margin-top:20px;" ng-click="show=!show">{{student.name}}</button>
<button type="button" class="close pull-right" ng-click="remove(student)">× </button>
</div>
</div>
<table class="table table-striped table-hover" ng-show="show">
<tr><th style="padding-right:0px;">Father Name:</th><td>{{student.fathername}}</td> </tr>
<tr><th>Class: </th><td>{{student.class}}</td></tr>
<tr><th>Subj1: </th><td>{{student.results.subj1}}</td></tr>
<tr><th>subj2: </th><td>{{student.results.subj2}}</td></tr>
<tr><th>subj3: </th><td>{{student.results.subj3}}</td></tr>
<tr><th>subj4: </th><td>{{student.results.subj4}}</td></tr>
</table>
</div>
</div>
</div>
</div>
Here is the fiddle link view in fullscreen view.
I want all the elements in the grid to align properly without leaving any place.
Can anyone help me?
This is not entirely possible with bootstrap. To explain you why, the .col-md-4 class has css property float: left which means whenever you open the right-most box, the left-side elements takes the height of the right-box, thus not allowing any other boxes below it.
You could get it working for the left and right elements by giving float:right for every last element in the row (in your case using .col-md-4:nth-child(3n){ float:right; }) like in the demo here but the middle element cannot be helped because it is still under float:left.
For your requirement, I recommend you use a JS library like Masonry which does exactly what you are expecting and used in cases where containers have variable heights and you want to fix them tightly, leaving no gap.
Here is what you are looking for: http://jsfiddle.net/ewNc6/
The trick is to insert a 'clear:both' on the first of each row.
<div class="col-md-4" ng-repeat="student in students" style="{{$index % 3 == 0 && 'clear:both'}}">
This normally will tie the code to the number of rows, but then again so does <div class="col-md-4" ,so you might be ok when doing so.
What I'm trying to achieve is a scrollable tab-bar.
I have a web page with multiple tabs.
The "tab" control it's just an html table, with a single row, in which each tab is a td.
The page has way over 10 tabs, an the tabs no longer fit in the screen.
I'd like to have the tabs scroll, or at least continue on the following row (something like a word-wrap effect)
or any other means so as to have as many tabs as I need, without worrying about the screen size...
thanks a lot
saludos
sas
ps: maybe I should be using a table, but rather just a paragraph, with each tab side by side...
I think a better option to achieve what you want is to put each tab in a div tag (or other tag). Then float:left each div. They will automatically wrap when the browser window is too narrow.
Something like this:
<div id='mytabs'>
<div class='tab'>Tab 1</div>
<div class='tab'>Tab 2</div>
<div class='tab'>Tab 3</div>
<div class='tab'>Tab 4</div>
.. etc
<div style='clear:both'></div>
</div>
Then in your stylesheet:
#mytabs .tab
{
float:left;
width:100px; // assuming fixed width tabs
// other formatting
}
I've just found this
<div style="overflow:auto; width:100%">
<table border="1" >
<tr>
<td>10000000000000000000000000000000000</td>
<td>10000000000000000000000000000000000</td>
<td>10000000000000000000000000000000000</td>
<td>10000000000000000000000000000000000</td>
<td>10000000000000000000000000000000000</td>
</tr>
</table>
</div>
it seems like it could work...