I am working the (fantastic) jQuery DataTables plugin and have begun to use the 'Responsive' extension so that it responds well on varied devices etc.
It is working fine however it adds some buttons to allow each row to be expanded to show the columns which have been hidden.
However, this is actually really annoying since it shows all the columns I have deliberately not shown as well as not looking ideal (imho).
Does anybody know how to remove these buttons?
Cheers,
Jack
I did a bit more or an intensive search of the docs and found that these 'expanded rows' are refered to as child rows and can be disabled as follows.
Initially I simply included the
"responsive": true,
tag in my datatables. These child rows may be disabled with:
"responsive": {
"details": false
},
I thing you can override the CSS style of this button and hide it from user:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
display:none
}
Change also the padding of the cell:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child {
padding-left: 10px; /* Instead of 30px */
}
Related
I would like to keep this button in the toolbar, keep its actions unchanged, keep the tooltip appear, but limit the label property to the tooltip only.
Inside the a.ui.addButton("Source"... of CKEDITOR.plugins.add("sourcearea",... in the ckeditor.js, the label option is defined like in the the other plugins that receive no permanent label on the toolbar. Tried
a.ui.addButton("Source", {
label: "",
command: "source",
toolbar: "mode,10"
});
which doesn't satisfy me 100%, as the tooltip is also removed.
CKEditor 4.x
I fixed this issue just by styling, maybe this could help you, if you still didn't figured out how this could be done
span.cke_button__source_label {
display: none;
}
The Problem
I am using the bootstrap-table plugin and the bootstrap-select plugin, which both work very nice.
But I get an issue when I use the bootstrap-select inside a bootstrap-table.
If the select box of the last row opens, the table size changes instead of the selectbox going "over" the table area creating a scroll area which I do not like.
Like in the image below:
I have tried to "fix" this effect using the below javascript code, but to no avail. The code gets executed but the problem is still there. I do not see which css is responsible for this behaviour and any help is highly appreciated.
$('.table-responsive').on('show.bs.select', function () {
console.log("triggered show bs select");
$('.table-responsive').css( "overflow", "hidden" );
});
$('.table-responsive').on('hide.bs.select', function () {
console.log("triggered hide bs select");
$('.table-responsive').css( "overflow", "auto" );
})
Example
The behaviour can be seen in:
Jsfiddle:http://jsfiddle.net/e3nk137y/8612/
Edit
I have it working now but only with applying padding-bottom on the table and using the following js code:
$('.table-responsive').on('show.bs.select', function () {
$('.table-responsive').css( "overflow", "inherit" );
$('.bootstrap-table').css( "overflow", "inherit" );
$('.fixed-table-body').css( "overflow", "inherit" );
});
I leave the question open for now since this is not a "nice" fix in my oppinion, especially the added padding which is needed to "hide" the select box again.
You can add the option container: 'body'. This will place the drop-down outside the table and will prevent the issue. If there's a problem with body, just use any element that contains the table, which is large enough to contain the drop-down menu.
Jsfiddle
The class .fixed-table-body seems to be causing this. Removing overflow-x: auto; and overflow-x: auto; fixes your issue.
The class .table-responsive seems to be causing this. Removing overflow-x: auto; fixes your issue. You can find the style in bootstrap.css
I'm using free-jqGrid and jqGrid has the option to place selection checkboxes for you onto the grid. On my grid I have two columns in the beginning which is placed by jqGrid and not backed up by my own data: a record number column 'rn' and the checkbox for record selection 'cb' (multi select in my case).
I feature the jqGrid on a bootstrap website, so when the loadComplete event hits, I add 'from-control' class to a lot of edits, like the per column search boxes and basically every edit I can find on the page. (I also replace every ugly little icon to glyphicons. I manipulate the DOM of the toolbar buttons so they become real buttons, so they look nicer and chardin.js work well for example. And so on and on and on. The end result is much better than the original. BTW, I'm not sure if that's the best practice, I couldn't find a better way to make jqGrid more bootstrappy, but this can be another question).
When you apply form-control class to a checkbox, it bloats up. That's beneficial, because it's much easier to click on it, you don't need to have a magnifier glass (like for the original tiny checkbox). I can nicely resize the columns for all those data columns what I supply data for, but I cannot figure out how to widen the cb column so it can accommodate the bloated up checkbox.
I tried adding a configuration for that column in my colModel:
Both
{
name: 'cb',
width: 38,
align: 'center',
sortable: false,
}
and
{
width: 38,
align: 'center',
sortable: false,
}
failed, I got an error from jqGrid stating that the number of colModels doesn't match the number of supplied data. That's true, because the data behind the cb column is not backed up by me.
I tried in the loadComplete
var $ajaxGrid = $("#ajaxGrid");
$ajaxGrid.jqGrid('setColProp', 'cb', { width: 38 });
That didn't give me an error, but also didn't change anything. Maybe I should put it into another event handler? Which?
Then I tried to go down the rocky road of manipulation:
$("#ajaxGrid_cb").css("width", "38px");
$(".td_cbox").css("width", "38px");
As you see I separately widen the header and the td elements. But this causes the table horizontal scrollbar to appear. Yuck! I tried to tumble deeper into the hacking hole, and make a wider column on the grid narrower to make the scrollbar disappear, but this didn't help:
$("#ajaxGrid_Name").css("width", "435px");
$('td[aria-describedby="ajaxGrid_Name"]').css("width", "435px");
There must be a way. Now it's ugly. Screenshot:
(Another style problem you can also see is for the Combined column I specify align: 'center' in the colModel but it has no effect.)
You can use multiselectWidth to specify the width of the multiselect column:
multiselectWidth: 38
One more alternative: you can change the columns width later using setColWidth which is the part of free jqGrid. I introduced the method originally in the answer as plugin to old jqGrid versions. Thus the following, for example, will work too:
onInitGrid: function () {
$(this).jqGrid("setColWidth", "cb", 38);
}
The onInitGrid callback or jQuery event "jqGridInitGrid" are good place, where you can modify the grid before the data will be loaded.
P.S. I'm working now on including better support of Bootstrap in free jqGrid. Probably you will just need to use guiStyle: "bootstrap" in the next version of jqGrid to make jqGrid be "in Bootstrap style".
I am currently using Datatables to apply a nice way of filtering and modifying a table that I have. It works just fine, but I am just trying to move the filter to the upper left, and the length changer to the upper right.
I have read through the dom documentation from the Datatables website but still cannot get it to work.
I have tried many variants of the following:
"dom":'fltip'
No matter how I position this, I cannot get the filter textbox to align left.
Is this something that can be done with the dom positioning attribute of the datatable, or does it have to be done in the CSS.
Thanks!
Try this
"dom" : <'row'<'col-md-3'f>><'row'<'col-lg-12't>>
row is location of components, col-xx-xx is the size based on bootstrap and 'f' is for filter; 't' is for table. Feel free to play around different components.
It loos like you need some kind of class/id with some CSS involved to get what you're looking for (based on this). I'd say you're better off just running with some basic CSS.
<style type="text/css">
#lhs_filter {
float: left;
}
#lhs_length {
float: right;
}
</style>
I have a custom routing application that takes information for a route from google maps. It then creates a Google Visualizations DataTable to hold all the steps in the route.
My current problem is that in order to reduce overflow for very large routes, I have enabled paging in the options of the DataTable. This leads to a not so printer friendly version because only the portion of the data that is shown in the table will be printed. The other portions of the table are loaded dynamically by the API when you click prev and next.
Is there a not so hard way to get the DataTable to be printer friendly when it comes time without sacrificing the ability to have paging enabled?
This is the way that I ended up solving this problem. I will not accept my own answer just in case someone has something much more elegant.
Originally I had:
var visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
sort: "disable",
allowHtml: true,
showRowNumber: true,
page: "enable",
pageSize: 9
});
I added another one that went to a div that I would hide with css.
//Create a second Visualization that Will be hidden.
var visualization = new google.visualization.Table(document.getElementById('printerFriendly'));
visualization.draw(data, {
sort: "disable",
allowHtml: true,
showRowNumber: true,
page: "disable"
});
Then I added the following rules to one of my css files.
#media print
{
#table{ display:none; }
}
#media screen
{
#printerFriendly{ display:none;}
}
This hides one table during normal use and hides the other during printing. I was hoping for something a little cleaner than this but this solution was very easy to implement.
There's a few ways you could do it.
If the changes you need in order to make the page "printer friendly" can be done purely by changing the CSS styling, then all you need to do is add another style sheet for print media:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
That is a pretty easy and transparent way to do it: the print media style sheet that will be used for printing, while your original style sheet will be used for web viewing.
So you could change the way things are displayed, or even toggle visibility whether it's being viewed on the web or printed...that should get you where you need to be.
To be honest I'm not too familiar with what you're doing, but it sounds like the user has to make a new request for each page...in that case just CSS styling will not help you.
You'll have to either make the information available all on one page ( just parts invisible), or set up a function in the app, or an option, et cetera that spits out a printer-friendly version.
#media print
{
#table > div > div { overflow: visible !important; }
}
This will solve your problem.
Explain:
2'nd div below #id used to create table have overflow: auto. This lead to fit info in this block. Changing it to overflow: visible will lead to show it content.
Check how it works on developer.mozilla.org/en-US/docs/Web/CSS/overflow