⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Datatables theme without horizontal scroll



midnigther

midnigther
  • profile picture
  • Member

Posted 16 July 2012 - 17:52 PM

Hey people, I'm new here and also a newbie user of grocery crud.
Recently I made a grid from a large database table with 24 columns. Unexpectedly I noticed that grid doesn't have a horizontal scroll bar. The columns prolonging after the content of my page. Let me show you the issue:

[img]https://lh6.googleusercontent.com/-__L2MUsGyUs/UARUhfj2GUI/AAAAAAAAANk/N4g3gEU6W_A/s989/Screenshot+from+2012-07-15+20%3A55%3A36.png[/img]

Any solution to fix it?

web-johnny

web-johnny
  • profile picture
  • Administrator
  • 1,166 posts

Posted 17 July 2012 - 06:48 AM

Hello [member='midnigther'] and welcome to the forum

You can simply add this CSS style:


.dataTables_wrapper {
overflow: auto;
}

and you will have a great scroll bar at overflow.

Matt

Matt
  • profile picture
  • Member

Posted 05 December 2012 - 18:54 PM

The overflow method is clunky. This is a built in feature of datatables.

The best way to handle this is to simply destory the initial initialisation and use your own so that you can set this property.

 var oTable2 = $('#groceryCrudTable').dataTable({"bDestroy":true,"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true});


If you download the Fixed Column plugin http://datatables.net/extras/
you can also make your first and last (or whatever) columns static - useful for keeping names and action buttons showing.


new FixedColumns( oTable, {
"iLeftColumns": 1,
"iRightColumns": 1
} );

flint

flint
  • profile picture
  • Member

Posted 01 December 2015 - 15:40 PM

Can one send instructions on how and where to implement the scroll bar code


joakin1602

joakin1602
  • profile picture
  • Member

Posted 23 February 2016 - 10:21 AM

Sorry for revive this post, but I need a solution for this, I tried Matt's solution but it didn't work for me or I didn't understand it.

 

Thank you


NoWay

NoWay
  • profile picture
  • Member

Posted 24 February 2016 - 19:55 PM

Sorry for revive this post, but I need a solution for this, I tried Matt's solution but it didn't work for me or I didn't understand it.

 

Thank you

Hello, you need to add to the css file the next code.

.dataTables_wrapper {
	   overflow: auto;
}

  If you are use the datatable theme go to assets/grocery_crud/themes/datatables/css/datatables.css and add the code.


joakin1602

joakin1602
  • profile picture
  • Member

Posted 25 February 2016 - 08:53 AM

Hello, you need to add to the css file the next code.

.dataTables_wrapper {
	   overflow: auto;
}

  If you are use the datatable theme go to assets/grocery_crud/themes/datatables/css/datatables.css and add the code.

 

I saw this solution in the forum, but it is a poor solution. Thanks but I will not use this ^^', I think I will buy bootstrap theme....