I have a layout issue that I'm trying to solve that involves sortable columns. When a user is on a low resolution screen, or resizes their browser, the sorting icons dont line up with each other anymore. Users have complained many times about this.
In the following screengrab I'd like the sorting icons to line up with the green line rather than the way they are now (red line)
Here'e the jsfiddle snippet that renders the above table: http://jsfiddle.net/JgSMq/
<table class="table table-bordered data-table sort display">
<thead>
<th class="sorting">ID Column <i class="sort-icon"></i></th>
<thead>
</table>
To patch the issue, you can move the <i> tags to before the actual text in <th>. That should improve your alignment issues by a lot.
To completely fix it though, you may need to set the vertical-align:top; on those <th>.
Here is an example.
Well maybe you can try something like:
th {
white-space: nowrap;
}
Here is your fiddle updated: http://jsfiddle.net/JgSMq/1/
Related
I have a table where I want to force page breaks before certain TR's when printing, so I searched around and found Applying "page-break-before" to a table row (tr), seemed simple enough: set display to block and use page-break-before as usual. However, it doesn't seem to be working (at least not in Chrome 59, Windows). For example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr.break-here {
display: block;
page-break-before: always;
}
</style>
</head>
<body>
<table>
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
</table>
</body>
</html>
When printed, all three of those sections are on the same page, but it should be three separate pages.
There was a suggestion there to use a pseudo-element, which I tried to no avail. There was also a suggestion to ensure the TR's TD contained a block-level element, so I tried putting empty div's in the relevant cells in that example, also with no change.
There is also How to apply CSS page-break to print a table with lots of rows?, where I've tried:
This answer: No effect:
tr.break-here { display:block; page-break-after:always; }
tr.break-here { page-break-after:always; }
What am I doing wrong here? How do I do this? I'm also a little confused because the answer on the linked question seems well received with no issues noted in comments. Splitting the table into three tables is not an option, as I need column widths (which are auto-fit to complex content) to be identical on all pages.
I found a solution based on this answer and some experimentation, I have no idea why it works:
<tr>
<td>
<div></div>
<div style="page-break-before:always"></div>
All of the following are important:
No page break styling on the tr.
The cell must contain at least two divs.
Any div except the first must be page-break-before:always.
If the cell only contains one div it doesn't work. Unlike in that answer, clear:both does not seem to matter, nor does the third div.
I was unable to find a working solution that did not involve adding divs to the tr (e.g. with pseudo-elements).
So this is what I'm doing for now, although I wouldn't mind somebody explaining what's going on here or, more importantly, why the solution in the original linked question (display:block; page-break-before:always; on the tr) did not work for me.
I have an issue that seems to be isolated to Chrome...which is usually NOT the way it goes. However, I have recreated the issue as purely as possible in the following plunkr.
http://plnkr.co/edit/k0viyc
To illustrate the problem, here is an image that displays the border in the highlighted row in Chrome and how it isn't showing in IE.
If you remove either of the following rows:
<tr class="spacer">
<td colspan="14" class="noBorder noBackground">
*** By removing this row, the extended border goes away ***
</td>
</tr>
You will see the associated border shows/hides.
We've been through lots of tests on this and can't isolate the problem. The primary css remains in the plunkr, including the inline styles and classes that are primarily byproducts of related bindings.
I would like to know if there is an error in the current design or if this is truly a bug in Chrome. If it's a bug, what is the least common elements here needed to recreate it? Is it worth submitting as a bug or is this just going to be a scenario we should just try to avoid.
Thanks for your time in advance.
Looks like to be a Chrome bug.
Minimal showcase reproducing it
.test {
border-collapse: collapse;
}
td {
border: solid 1px blue;
}
.no {
border: none;
}
<table class="test">
<tr>
<td>one</td>
<td class="no">two</td>
</tr>
<tr>
<td class="no" colspan="2">double</td>
</tr>
</table>
Chromium tracking (somehow) related border rendering bug
A little disturbing the mention
It's a known (old) issue in our table code. Collapsing borders are
determined based on adjacent cells and our code doesn't deal correctly
with spanning cells (we only consider the cell adjoining the first row
/ column in a row / column span). On top of that, our border
granularity is determined by the cell's span.
To fix this bug, we would need to overhaul our collapsing border code,
which is a big undertaking.
In conclusion:
If the table has border-collapse
and the cell is colspaning
Then different border settings (for that cell, implicitly) will fail
Posibilities to fix it:
Setting border-style: hidden to the cell has higher priority and will hide all the borders (not good)
Removing colspan in the spacers
or maybe remove fully the spacers rows and handle the display without them.
Some glitch related to tr.spacer.
As a workaround set colspan=7 to td in tr.spacer.
Since this seems to be a bug with Chrome—instead of using a colspan, you could write out the remaining cells needed to complete the row, and be sure that they don't have a class that includes a border.
This:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border"> </td></tr>
Would become:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border"> </td><td class="no-border"> </td></tr>
I had to use border-collapse, and was having the same problem. This simple HTML markup change worked for me.
After days of this issue being on my mind, a super hacky solution finally hit me.
Set the border color to the same color as your background.
td {
border: 1px solid (background color);
}
I have just started working on a page that uses bootstrap and bootstrap-table.
Starting with just bootstrap I can select the layout I like using:
<table class="table">
I then want to add the column sorting functionality from bootstrap-table so I change that to:
<table class="table" data-toggle="table">
This has the effect of changing the presentation set up by bootstrap.
I then add the sorting attributes:
<table class="table" data-toggle="table" data-sort-name="fname" data-sort-order="desc">
<thead>
<tr>
<th data-field="fname" data-sortable="true">First Name
<th data-field="lname" data-sortable="true">Last Name</th>
This functions but each time I click on a new header to select that as my sort column it resizes the width of that column.
Questions:
Is it possible to use bootstrap-table /without/ changing the presentation layout set up by bootstrap?
Is it possible to prevent the changing of column widths when selecting a new sort column.
You need to provide fixed width with some value to the "td" to achieve that. Like in this case you can provide "width: 33.33%" for three columns.
You can use this css BUT you may have some problems with small responsive versions.
th .caret{
position:absolute;
}
th{
vertical-align:middle;
}
I cannot understand what do you mean by "changing the presentation layout". Maybe you can remove the css you dont want to use? Can you be more specific?
I've got an IE7 issue i need some help with. I'm loading in a table of data via ajax and php. Works fine everywhere except IE7 (doi).
The problem is that there isn't a vertical scrollbar after it loads several hundred records.
I've checked into the position and overflow bugs (like here: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/) but have still had no luck as of yet.
The arrow keys don't work, either. Only way to see what's below the fold of the browser window is to click and drag.
Any help is appreciated.
=================
UPDATE:
Wanted to include some images of what's going on. Can't give access to the page/files, has sensitive information. Hopefully this can help a bit, though.
Before:
After:
The code for the table goes something like this:
<div class="row hide" id="spend-table" style="display: block;"><table border="0" cellpadding="4" cellspacing="0" id="spend">
<thead>
<tr>
<th style="display: none;">Id</th><th>Name</th><th>City</th><th>State</th><th>Vendor</th><th>Catalog#</th><th>Fac#</th><th>Desc</th><th>Quantity</th><th>UOM</th><th>Total</th><th>Highest</th><th>Lowest</th></tr>
</thead>
<tbody>
<tr>
<td style="display: none;">35816</td><td>Boblawblaw</td><td>Law BLog</td><td>KY</td><td>The Avengers</td><td>DE878Z</td><td>12091</td><td>Canned Butterscotch</td><td>1</td><td>YR</td><td>$127.13</td><td>$127.13</td><td>$127.13</td><td style="display: none;">2</td></tr>
</tbody>
</table></div>
The table's parent div is hidden initially, but after the search is performed (via AJAX & Codeigniter) the results are kicked back from CI using the Table class to populate the div with the new info (table).
Just to be clear: all the records show up as they ought. You can click and drag to see everything. It's simply an issue of scroll/overflow/etc. getting overlooked in IE7.
Thanks!
===================
Another update:
The table, the table's containing div, and that div's containing div all have heights of 800+. The body, however, is stuck at 348px. Have zoom, position, and overflow attributes set. Out of ideas :\
#mikedidthis helped out big time in the chat room.
i had added too many overflows throughout. removed it from the body by changing to overflow: auto !important; and removed from the .container
the overflow bug fix ended up becoming the bug itself :p thanks for all the help and commentary.
best,
Edit 2:
Problem seemed to reside on "bigTable" elements th rules. Apparently th's were inheriting wrong min-width's when used on layout-template. I'm still investigating this.
Still, I'm going to give one more try for divs. One big problem was using fixed nav and dynamic content, but I already found Holy Grail -solution for this (http://alistapart.com/article/holygrail).
Thanks for suggestions & all the lovely trolololo.
Edit:
I replicated this problem to http://jsbin.com/eyitij/4/edit
I have a strange problem with table + td width. I have code similar to this:
<table class="mainLayout" style="width: 100%;">
<tr>
<td style="width: 250px;">
<div id="leftNavigationPanel"> * content * </div>
</td>
<td id="panelCell">
<div class="panel">
<table id="bigTable" width="100%"> * LOTS OF CONTENT, includes big table * </table>
</div>
</td>
<tr>
</table>
When I run this code on browsers, mainLayout is getting overflowed, so it becomes 3600px, and this happens because of big table inside Panel.
Big table I'm referring to can be contained within screen. When done so, it gets horizontal scrollbar (which is what I want). This works if big-table is loaded in separate html-file with rule "width: 100%".
After adding mainLayout a rule "display: block;", mainLayout table is rendered ~1800px and is contained within screen, but problem is that "panelCell"-TD is still ~3400px wide, so I'm still having whole page scrolling... TD isn't contained within table, but always expands to 250px + bigTable.width() !?
Basically browser doesn't know how to calculate "panelCell" to fill only : window.width - leftNavigationPanel.
Any ideas how to make right rules without using javascript + precalculated max-width rule for "panelCell"?
panelCell must be contained within window
bigTable must be contained within panelCell, with scrollbar
Setting table-layout:fixed fixes a lot of weird problems with tables :
<table style="table-layout:fixed;">
<col style="width:250px"/>
<col/>
<tr>
...