I am looking for data-table html structure with fixed header, horizontal and vertical scrolling. I am working on a already developed datatable widget . I found this example https://datatables.net/examples/basic_init/scroll_xy.html where html structure is similar to what I have in my widget. I want to ask in the above example how header scrolls even though the scroll is on body of table .If it is being done by JavaScript still none of the header css properties change when we scroll it horizontally.
Add this script to call your table id
$(document).ready(function () {
$('#tableid').DataTable({
"scrollX": true,
"scrollY": 300,
"paging": false,
});
$('.dataTables_length').addClass('bs-select');
});
for more information: https://mdbootstrap.com/docs/jquery/tables/scroll/
My experience is if you use the example above exactly as it is, ie the same table class, it should work but the moment you introduce other bootstrap classes, maybe you want to add data export to excel feature to the table, things get complicated. A 'one fits all' solution is hard to find, your solution depends on the additional classes/CSS.
Related
I am using igGrid in our MVC application with bootstrap. The requirement is to have the grid header fixed so that its visible when user scrolls the long list from top to bottom. Normally the grid header looks like this:
The problem is when I call bootstrap affix class, it shows the grid headers but they don't have any width. They all just stick together and it doesn't represent the correct cell header.
The way I am doing it by getting the grid rendered event as:
rendered: function (evt, ui) {
//get grid header elements
var _thead = $(ui.owner.element[0]).find('thead');
//call affix
_thead.affix({ offset: { top: 30 } });
},
I don't how I can fix the width of the header. Any help is appreciated.
The igGrid exposes an option to configure fixed headers. The bootstrap affix plugin will cause the grid header to misbehave because it changes the header positioning. My suggestion is to use the built-in fixed headers to ensure misalignment doesn't occur.
Is it possible to set a horizontal scrolling feature so that it scrolls to (overflow, I'm assuming, unless there is another way) the left as well as the right. Sort of like this picture:
a horizontal scrolling feature
... except I want to load the object just like it is in that photo but have other objects (images rather than the divs pictured) back behind to the left of that first object), so you can scroll to unseen things in both directions.
EDIT: in response to some of the people offering to help here (thanks), I have composed a fiddle (in the comments below). The hope is that I could load this horizontal feature with the blue-border box at far left (on initial load) and people could scroll back or forth). I'd prefer (but I'll take either one) it to be marked to load on that box rather than css it so it would load after a certain width or something like that, because I want to it to function this way universally (regardless of how many objects are hidden to the left) but, again, I'll take either solution, because I can probably make it work with either.
Here is a quick mockup of something like that. It can be extended to use scroll events. Used jquery but it can be done in pure js too. Just made the body hide the overflow like this
body {
overflow: hidden;
}
I have buttons to move it around but as I said you can do it with scroll events too.
function left () {
var div = document.getElementById('scrollContainer');
$(div).animate({ "right": "+=100px" }, 500);
}
function right () {
var div = document.getElementById('scrollContainer');
$(div).animate({ "right": "-=100px" }, 500);
}
Fiddle: http://jsfiddle.net/hna6jkzk/
And obviously the divs can be images too.
A fiddle with no JS and visible scrollbar: http://jsfiddle.net/hna6jkzk/1/
A fiddle with no JS and hidden scrollbar: http://jsfiddle.net/hna6jkzk/2/
http://pointnorth.io
How did they make the expanding sidebar on the left? It seems like it's css only but I might be wrong.
There's the main url and then the other ones are all preceeded by #, the text is all on one page and then it expands or hide when clicked.
I don't understand how they hide or display data.
It's not only CSS. This page in bottom of body has javascript code, which sets data-active attribute for link, which was be clicked. As you can see, data-active made section of sub items with height: auto. In other cases .nav--sub-sections class has height: 0px.
You can easily implement your own without lifting someone else's idea.Look at this fiddle http://jsfiddle.net/vfrcx678/ and how it goes here http://jsfiddle.net/vfrcx678/show/
This is some sample code
$(window).hashchange({
hash: "#!/login/",
onSet: function() {
$("#login-form").show();
},
onRemove: function() {
$("#login-form").hide();
},
});
Project page https://github.com/apopelo/jquery-hashchange
I am using Dojo 1.7 with an IE9 browser. I am trying to dynamically generate multiple DataGrids and append them to content inside a div. I am using the autoHeight property of the grid.
This works out fine in Chrome or Firefox. However, the grids are not displayed on IE until I set the height to a fixed amount.
How can I make autoHeight work in IE? I suspect its something to do with how IE9 treats height semantics.
I've been dealing with this same issue until a few minutes ago: I am creating dynamic grids depending on how many items I have in a list and every grid is shown with autoHeight. The problem is nothing to do with Grids or its height.
I am not sure but IE interpret layers in a different way than other browsers, so you have to add them in a concrete way. Try to add the grid first to your DOM node (I mean a node that you also create dynamically over which you will append the grid), then add in last place this grid container to your HTML. It is working correctly for me.
I also faced the same issue. I tried to find an alternate.
I followed this way and its working.
Add following property to
dojox.grid.datagrid
onShow: function(){if(grid)grid.setStore(store);}
And call grid.onShow();
var grid= new dojox.grid.DataGrid({
store : store,
query : {
sno : "*"
},
autoHeight:true,
structure : columns,
selectionMode : "Multiple",
onShow: function(){if(grid)grid.setStore(store);}
});
// This will fire the onShow event on grid.
grid.onShow();
On IE, I had to ensure that I called startup on the dynamically added grid. e.g. if you add the grid in postCreate, try this:
startup: function() {
this.inherited(arguments);
if (this.grid) this.grid.startup();
}
The grid can be fussy. Even doing this, I still have height issues on IE (IE9) with autoHeight. If I set an updated store after the fact, the height goes to 0.
a quick introduction :
facebook has changed the LIKE (count) button
into something like :
LIKE (count)
[ -------------------- clic = open a Big zone bottom / right --------------------]
problem :
Its nice BUT ....
you forgot that a lot of website are using the like button in "toolbars". Page example
Header
Left column Tooblbar, include fb:like -------------------- Right column
Document content
Footer
and lot of structured pages/ blocs are using "overflow:hidden" !! So it makes the displayed widget randomly truncated everywhere (right, bottom...) depending of its environnement.
Its impossible to remove all the overflow:hidden from the containers blocks, to satisfy a widget update.
What can we do. Some sites where clean, now they look drafts, with all button opening truncated stuff...
any solution ?
If you want to use the Facebook plugin, the only solution seems to be to change the HTML/CSS so overflow:hidden can be removed. Alternatively, you could try to use a service that forwards the user actions to social networks for you and offers different methods of website integration.
If you're not using overflow: hidden for semantic reasons, you could always change it to overflow: visible or just remove it. I'm assuming that the fix isn't that simple...
A quickfix that wouldn't require you to modify your CSS would be to place your FB Like button outside of any containing elements that have overflow: hidden or overflow: auto and use absolute positioning to get it where you want it.