I might be on the wrong track, but is there a way to print the table resulted after filtering with tablesorter custom filters available here http://mottie.github.com/tablesorter/docs/example-widget-filter-formatter-1.html ?
If you just use the basic page print, it should print the table as you see it on the screen with the filters applied.
If you want all rows showing, then use a print style to reveal all hidden rows:
#media print {
table.tablesorter tbody tr {
display: table-row !important;
}
}
Related
I am working with "after" pseudo elements' content-property to add divider between my footer-links.
.link::after {
content: " | ";
}
On iOS the the whole element including it's after-pseudo-element gets highlighted. This behaviour is unwanted - I would like the after-content not to get highlighted when its parent element (the "real" element) is active.
Here's a screenshot of an clicked link on an iOS device
Setting the tap-highlight-color-property separately for the after-element doesn't seem to have any effect.
jsfiddle representing this problem
Is there any css-way that can solve this problem or do I have to change the non-css code to make the divider not get highlighted?
Try using these two:
.link,
.link::after {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
A few more SO answers and links are here.
I'm trying to disable the checkbox on a specific row based on some property of it's Bean (or just make the whole row generally unselectable), but I can't really see any method or property I could use to get a handle of the checkboxes on the left hand side added when using a multi-selection model or something as broad as disabling the whole row. Any thoughts on how this could be achieved, or where I should be looking?
You can use CSS to hide uncheckable rows. First set their styles using setRowStyleGenerator:
grid.setRowStyleGenerator(row -> {
boolean uncheckable = (Boolean)
row.getItem().getItemProperty("uncheckable").getValue();
return uncheckable ? "uncheckable-row" : "";
});
Then change styles in your .scss, they should look something like:
.v-grid-row.uncheckable-row td {
background: #b1b9d6 none repeat scroll 0 0;
}
.v-grid-row.uncheckable-row td:first-child {
visibility: hidden;
}
.v-grid-row.uncheckable-row.v-grid-row-selected > .v-grid-cell {
background-image: none;
border-color: #d4d4d4;
color: inherit;
text-shadow: inherit;
}
Here I hide the whole cell with checkbox (if hiding the content of td itself, user will still be available to select the row), use a different color for these rows and prevent them from being highlighted when "select all" checkbox is active. Surely, further styling is available. Since we only hide them from user, they still can be selected with grid.select() and located in grid.getSelectedRows() collection, you should filter them manually (by using some "uncheckable" property, as shown above).
It is not possible to disable checkbox on a specific row.
One solution is to use generated column and/or custom renderer.
if you are using twitter bootstrap as your responsive framework, you should be able to find that row and give it a class of ".inactive", and if that doesn't work you can always rig it but placing and absolute positioned box with a height and width of 100% inside of that row and z-index it to at least 250. That should make everything in that row un-clickable!
I have a table and i want to have ink and ripple effect for specific row in the table. when i add the attribute md-ink-ripple to tr element of table, it shows the ripple for entire table. please let me know how to fix this issue.
You can add display: block; position: relative; to the row styling - but that can result in odd behavior.
I have a jQuery UI accordion with Markup structure
<div id="accordion2">
<h3>title</h3>
<div>stuff texty</div>
<h3>title2</h3>
<div>stuff texty</div>
</div>
However, the second tab of the accordion is in a plainer format than the first (i.e. it has less pictures and is hence more mobile friendly).
I am want to use a media query to hide the first tab and its contents when screen width is less than 640px. I tried giving the first h3 and the first div tags a class of first and then used
#media (max-width: 640px) {
.first {
display: none;
}
}
To make them disappear... but it didn't work. Does anyone know how I can go about doing this?
try this as a CSS3 option:
#accordion2 h3:first-of-type
{
display:none;
}
if you cannot support CSS3 then give that first heading a class name and target that.
I use jquery tablesorter with pager.
I search a way that the printed version of the page show all items (not just the list visible).
example: you got a list of 25 elements. with a pager set to 10 element. On page 1 you will see the first 10 elements. on this page, you call Print. The result is the list of 25 elements.
If you happen to be using my fork of tablesorter, you have two choices:
Set the pager plugin option removeRows to false, then include this in your css stylesheet:
#media print {
table.tablesorter tbody tr {
display: table-row !important;
}
}
This method will also work if the filter widget is active.
Disable the pager plugin before printing as follows:
// use $('table.tablesorter').trigger('enable.pager'); to re-enable the pager
$('table.tablesorter').trigger('disable.pager');
This is reposted from here.