DataTable not rendering properly on small device





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







2















I have a Data-table properly working, but the issue I am facing is when I am using the same table on small device its not working fine



Snippet






var data = [{

    "amount": 518212,

    "billdate": "2018-08-04",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 104801,

    "billdate": "2018-08-04",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 138151,

    "billdate": "2018-08-04",

    "outlet": "KOLAR"

  },

  {

    "amount": 628358,

    "billdate": "2018-08-05",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 115223,

    "billdate": "2018-08-05",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 134107,

    "billdate": "2018-08-05",

    "outlet": "KOLAR"

  },

  {

    "amount": 177866,

    "billdate": "2018-08-06",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 66095,

    "billdate": "2018-08-06",

    "outlet": "KOLAR"

  },

  {

    "amount": 284069,

    "billdate": "2018-08-07",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58789,

    "billdate": "2018-08-07",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 67886,

    "billdate": "2018-08-07",

    "outlet": "KOLAR"

  },

  {

    "amount": 313128,

    "billdate": "2018-08-08",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 59939,

    "billdate": "2018-08-08",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 68558,

    "billdate": "2018-08-08",

    "outlet": "KOLAR"

  },

  {

    "amount": 321797,

    "billdate": "2018-08-09",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 64431,

    "billdate": "2018-08-09",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 57352,

    "billdate": "2018-08-09",

    "outlet": "KOLAR"

  },

  {

    "amount": 323556,

    "billdate": "2018-08-10",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58772,

    "billdate": "2018-08-10",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 43722,

    "billdate": "2018-08-10",

    "outlet": "KOLAR"

  },

  {

    "amount": 464127,

    "billdate": "2018-08-11",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 93110,

    "billdate": "2018-08-11",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 62213,

    "billdate": "2018-08-11",

    "outlet": "KOLAR"

  },

  {

    "amount": 626772,

    "billdate": "2018-08-12",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 126933,

    "billdate": "2018-08-12",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 63119,

    "billdate": "2018-08-12",

    "outlet": "KOLAR"

  },

  {

    "amount": 167391,

    "billdate": "2018-08-13",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 27110,

    "billdate": "2018-08-13",

    "outlet": "KOLAR"

  },

  {

    "amount": 275115,

    "billdate": "2018-08-14",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58633,

    "billdate": "2018-08-14",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 37920,

    "billdate": "2018-08-14",

    "outlet": "KOLAR"

  }

];

var columndef = [{

  title: "amount",

  data: "amount"

}, {

  title: "billdate",

  data: "billdate"

}, {

  title: "outlet",

  data: "outlet"

}];

$('#tbl').DataTable({

  columns: columndef,

  data: data,

  scrollY: '50vh',

  scrollCollapse: true,

  paging: false

});

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">



<table id="tbl" class="table table-striped table-bordered "></table>





Now what happens on big devices it is working fine, but when I use that on small device the tbody part properly scrolls horizontally but the thead part is static which is not looking good on ui.



To replicate the issue, resize the browser and scroll horizontally Is there an alternate resource I can use for this?






javascript jquery html css datatable







share|improve this question

























  • Have you added the view port tags ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

    – ThivankaW
    Jan 4 at 8:08











  • @ThivankaW yup i have added in my code

    – manish thakur
    Jan 4 at 8:10











  • is your thead's overflowing out of the current view port when using small devices ?

    – ThivankaW
    Jan 4 at 8:14













  • @ThivankaW yupp like that..you just check my snippet please,and resize the browser,you will find the issue

    – manish thakur
    Jan 4 at 8:17


















2















I have a Data-table properly working, but the issue I am facing is when I am using the same table on small device its not working fine



Snippet






var data = [{

    "amount": 518212,

    "billdate": "2018-08-04",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 104801,

    "billdate": "2018-08-04",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 138151,

    "billdate": "2018-08-04",

    "outlet": "KOLAR"

  },

  {

    "amount": 628358,

    "billdate": "2018-08-05",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 115223,

    "billdate": "2018-08-05",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 134107,

    "billdate": "2018-08-05",

    "outlet": "KOLAR"

  },

  {

    "amount": 177866,

    "billdate": "2018-08-06",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 66095,

    "billdate": "2018-08-06",

    "outlet": "KOLAR"

  },

  {

    "amount": 284069,

    "billdate": "2018-08-07",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58789,

    "billdate": "2018-08-07",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 67886,

    "billdate": "2018-08-07",

    "outlet": "KOLAR"

  },

  {

    "amount": 313128,

    "billdate": "2018-08-08",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 59939,

    "billdate": "2018-08-08",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 68558,

    "billdate": "2018-08-08",

    "outlet": "KOLAR"

  },

  {

    "amount": 321797,

    "billdate": "2018-08-09",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 64431,

    "billdate": "2018-08-09",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 57352,

    "billdate": "2018-08-09",

    "outlet": "KOLAR"

  },

  {

    "amount": 323556,

    "billdate": "2018-08-10",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58772,

    "billdate": "2018-08-10",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 43722,

    "billdate": "2018-08-10",

    "outlet": "KOLAR"

  },

  {

    "amount": 464127,

    "billdate": "2018-08-11",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 93110,

    "billdate": "2018-08-11",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 62213,

    "billdate": "2018-08-11",

    "outlet": "KOLAR"

  },

  {

    "amount": 626772,

    "billdate": "2018-08-12",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 126933,

    "billdate": "2018-08-12",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 63119,

    "billdate": "2018-08-12",

    "outlet": "KOLAR"

  },

  {

    "amount": 167391,

    "billdate": "2018-08-13",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 27110,

    "billdate": "2018-08-13",

    "outlet": "KOLAR"

  },

  {

    "amount": 275115,

    "billdate": "2018-08-14",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58633,

    "billdate": "2018-08-14",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 37920,

    "billdate": "2018-08-14",

    "outlet": "KOLAR"

  }

];

var columndef = [{

  title: "amount",

  data: "amount"

}, {

  title: "billdate",

  data: "billdate"

}, {

  title: "outlet",

  data: "outlet"

}];

$('#tbl').DataTable({

  columns: columndef,

  data: data,

  scrollY: '50vh',

  scrollCollapse: true,

  paging: false

});

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">



<table id="tbl" class="table table-striped table-bordered "></table>





Now what happens on big devices it is working fine, but when I use that on small device the tbody part properly scrolls horizontally but the thead part is static which is not looking good on ui.



To replicate the issue, resize the browser and scroll horizontally Is there an alternate resource I can use for this?






javascript jquery html css datatable







share|improve this question

























  • Have you added the view port tags ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

    – ThivankaW
    Jan 4 at 8:08











  • @ThivankaW yup i have added in my code

    – manish thakur
    Jan 4 at 8:10











  • is your thead's overflowing out of the current view port when using small devices ?

    – ThivankaW
    Jan 4 at 8:14













  • @ThivankaW yupp like that..you just check my snippet please,and resize the browser,you will find the issue

    – manish thakur
    Jan 4 at 8:17














2












2








2








I have a Data-table properly working, but the issue I am facing is when I am using the same table on small device its not working fine



Snippet






var data = [{

    "amount": 518212,

    "billdate": "2018-08-04",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 104801,

    "billdate": "2018-08-04",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 138151,

    "billdate": "2018-08-04",

    "outlet": "KOLAR"

  },

  {

    "amount": 628358,

    "billdate": "2018-08-05",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 115223,

    "billdate": "2018-08-05",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 134107,

    "billdate": "2018-08-05",

    "outlet": "KOLAR"

  },

  {

    "amount": 177866,

    "billdate": "2018-08-06",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 66095,

    "billdate": "2018-08-06",

    "outlet": "KOLAR"

  },

  {

    "amount": 284069,

    "billdate": "2018-08-07",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58789,

    "billdate": "2018-08-07",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 67886,

    "billdate": "2018-08-07",

    "outlet": "KOLAR"

  },

  {

    "amount": 313128,

    "billdate": "2018-08-08",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 59939,

    "billdate": "2018-08-08",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 68558,

    "billdate": "2018-08-08",

    "outlet": "KOLAR"

  },

  {

    "amount": 321797,

    "billdate": "2018-08-09",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 64431,

    "billdate": "2018-08-09",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 57352,

    "billdate": "2018-08-09",

    "outlet": "KOLAR"

  },

  {

    "amount": 323556,

    "billdate": "2018-08-10",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58772,

    "billdate": "2018-08-10",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 43722,

    "billdate": "2018-08-10",

    "outlet": "KOLAR"

  },

  {

    "amount": 464127,

    "billdate": "2018-08-11",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 93110,

    "billdate": "2018-08-11",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 62213,

    "billdate": "2018-08-11",

    "outlet": "KOLAR"

  },

  {

    "amount": 626772,

    "billdate": "2018-08-12",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 126933,

    "billdate": "2018-08-12",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 63119,

    "billdate": "2018-08-12",

    "outlet": "KOLAR"

  },

  {

    "amount": 167391,

    "billdate": "2018-08-13",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 27110,

    "billdate": "2018-08-13",

    "outlet": "KOLAR"

  },

  {

    "amount": 275115,

    "billdate": "2018-08-14",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58633,

    "billdate": "2018-08-14",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 37920,

    "billdate": "2018-08-14",

    "outlet": "KOLAR"

  }

];

var columndef = [{

  title: "amount",

  data: "amount"

}, {

  title: "billdate",

  data: "billdate"

}, {

  title: "outlet",

  data: "outlet"

}];

$('#tbl').DataTable({

  columns: columndef,

  data: data,

  scrollY: '50vh',

  scrollCollapse: true,

  paging: false

});

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">



<table id="tbl" class="table table-striped table-bordered "></table>





Now what happens on big devices it is working fine, but when I use that on small device the tbody part properly scrolls horizontally but the thead part is static which is not looking good on ui.



To replicate the issue, resize the browser and scroll horizontally Is there an alternate resource I can use for this?






javascript jquery html css datatable







share|improve this question
















I have a Data-table properly working, but the issue I am facing is when I am using the same table on small device its not working fine



Snippet






var data = [{

    "amount": 518212,

    "billdate": "2018-08-04",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 104801,

    "billdate": "2018-08-04",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 138151,

    "billdate": "2018-08-04",

    "outlet": "KOLAR"

  },

  {

    "amount": 628358,

    "billdate": "2018-08-05",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 115223,

    "billdate": "2018-08-05",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 134107,

    "billdate": "2018-08-05",

    "outlet": "KOLAR"

  },

  {

    "amount": 177866,

    "billdate": "2018-08-06",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 66095,

    "billdate": "2018-08-06",

    "outlet": "KOLAR"

  },

  {

    "amount": 284069,

    "billdate": "2018-08-07",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58789,

    "billdate": "2018-08-07",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 67886,

    "billdate": "2018-08-07",

    "outlet": "KOLAR"

  },

  {

    "amount": 313128,

    "billdate": "2018-08-08",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 59939,

    "billdate": "2018-08-08",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 68558,

    "billdate": "2018-08-08",

    "outlet": "KOLAR"

  },

  {

    "amount": 321797,

    "billdate": "2018-08-09",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 64431,

    "billdate": "2018-08-09",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 57352,

    "billdate": "2018-08-09",

    "outlet": "KOLAR"

  },

  {

    "amount": 323556,

    "billdate": "2018-08-10",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58772,

    "billdate": "2018-08-10",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 43722,

    "billdate": "2018-08-10",

    "outlet": "KOLAR"

  },

  {

    "amount": 464127,

    "billdate": "2018-08-11",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 93110,

    "billdate": "2018-08-11",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 62213,

    "billdate": "2018-08-11",

    "outlet": "KOLAR"

  },

  {

    "amount": 626772,

    "billdate": "2018-08-12",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 126933,

    "billdate": "2018-08-12",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 63119,

    "billdate": "2018-08-12",

    "outlet": "KOLAR"

  },

  {

    "amount": 167391,

    "billdate": "2018-08-13",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 27110,

    "billdate": "2018-08-13",

    "outlet": "KOLAR"

  },

  {

    "amount": 275115,

    "billdate": "2018-08-14",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58633,

    "billdate": "2018-08-14",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 37920,

    "billdate": "2018-08-14",

    "outlet": "KOLAR"

  }

];

var columndef = [{

  title: "amount",

  data: "amount"

}, {

  title: "billdate",

  data: "billdate"

}, {

  title: "outlet",

  data: "outlet"

}];

$('#tbl').DataTable({

  columns: columndef,

  data: data,

  scrollY: '50vh',

  scrollCollapse: true,

  paging: false

});

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">



<table id="tbl" class="table table-striped table-bordered "></table>





Now what happens on big devices it is working fine, but when I use that on small device the tbody part properly scrolls horizontally but the thead part is static which is not looking good on ui.



To replicate the issue, resize the browser and scroll horizontally Is there an alternate resource I can use for this?






var data = [{

    "amount": 518212,

    "billdate": "2018-08-04",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 104801,

    "billdate": "2018-08-04",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 138151,

    "billdate": "2018-08-04",

    "outlet": "KOLAR"

  },

  {

    "amount": 628358,

    "billdate": "2018-08-05",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 115223,

    "billdate": "2018-08-05",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 134107,

    "billdate": "2018-08-05",

    "outlet": "KOLAR"

  },

  {

    "amount": 177866,

    "billdate": "2018-08-06",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 66095,

    "billdate": "2018-08-06",

    "outlet": "KOLAR"

  },

  {

    "amount": 284069,

    "billdate": "2018-08-07",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58789,

    "billdate": "2018-08-07",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 67886,

    "billdate": "2018-08-07",

    "outlet": "KOLAR"

  },

  {

    "amount": 313128,

    "billdate": "2018-08-08",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 59939,

    "billdate": "2018-08-08",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 68558,

    "billdate": "2018-08-08",

    "outlet": "KOLAR"

  },

  {

    "amount": 321797,

    "billdate": "2018-08-09",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 64431,

    "billdate": "2018-08-09",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 57352,

    "billdate": "2018-08-09",

    "outlet": "KOLAR"

  },

  {

    "amount": 323556,

    "billdate": "2018-08-10",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58772,

    "billdate": "2018-08-10",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 43722,

    "billdate": "2018-08-10",

    "outlet": "KOLAR"

  },

  {

    "amount": 464127,

    "billdate": "2018-08-11",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 93110,

    "billdate": "2018-08-11",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 62213,

    "billdate": "2018-08-11",

    "outlet": "KOLAR"

  },

  {

    "amount": 626772,

    "billdate": "2018-08-12",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 126933,

    "billdate": "2018-08-12",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 63119,

    "billdate": "2018-08-12",

    "outlet": "KOLAR"

  },

  {

    "amount": 167391,

    "billdate": "2018-08-13",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 27110,

    "billdate": "2018-08-13",

    "outlet": "KOLAR"

  },

  {

    "amount": 275115,

    "billdate": "2018-08-14",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58633,

    "billdate": "2018-08-14",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 37920,

    "billdate": "2018-08-14",

    "outlet": "KOLAR"

  }

];

var columndef = [{

  title: "amount",

  data: "amount"

}, {

  title: "billdate",

  data: "billdate"

}, {

  title: "outlet",

  data: "outlet"

}];

$('#tbl').DataTable({

  columns: columndef,

  data: data,

  scrollY: '50vh',

  scrollCollapse: true,

  paging: false

});

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">



<table id="tbl" class="table table-striped table-bordered "></table>





var data = [{

    "amount": 518212,

    "billdate": "2018-08-04",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 104801,

    "billdate": "2018-08-04",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 138151,

    "billdate": "2018-08-04",

    "outlet": "KOLAR"

  },

  {

    "amount": 628358,

    "billdate": "2018-08-05",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 115223,

    "billdate": "2018-08-05",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 134107,

    "billdate": "2018-08-05",

    "outlet": "KOLAR"

  },

  {

    "amount": 177866,

    "billdate": "2018-08-06",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 66095,

    "billdate": "2018-08-06",

    "outlet": "KOLAR"

  },

  {

    "amount": 284069,

    "billdate": "2018-08-07",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58789,

    "billdate": "2018-08-07",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 67886,

    "billdate": "2018-08-07",

    "outlet": "KOLAR"

  },

  {

    "amount": 313128,

    "billdate": "2018-08-08",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 59939,

    "billdate": "2018-08-08",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 68558,

    "billdate": "2018-08-08",

    "outlet": "KOLAR"

  },

  {

    "amount": 321797,

    "billdate": "2018-08-09",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 64431,

    "billdate": "2018-08-09",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 57352,

    "billdate": "2018-08-09",

    "outlet": "KOLAR"

  },

  {

    "amount": 323556,

    "billdate": "2018-08-10",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58772,

    "billdate": "2018-08-10",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 43722,

    "billdate": "2018-08-10",

    "outlet": "KOLAR"

  },

  {

    "amount": 464127,

    "billdate": "2018-08-11",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 93110,

    "billdate": "2018-08-11",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 62213,

    "billdate": "2018-08-11",

    "outlet": "KOLAR"

  },

  {

    "amount": 626772,

    "billdate": "2018-08-12",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 126933,

    "billdate": "2018-08-12",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 63119,

    "billdate": "2018-08-12",

    "outlet": "KOLAR"

  },

  {

    "amount": 167391,

    "billdate": "2018-08-13",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 27110,

    "billdate": "2018-08-13",

    "outlet": "KOLAR"

  },

  {

    "amount": 275115,

    "billdate": "2018-08-14",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58633,

    "billdate": "2018-08-14",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 37920,

    "billdate": "2018-08-14",

    "outlet": "KOLAR"

  }

];

var columndef = [{

  title: "amount",

  data: "amount"

}, {

  title: "billdate",

  data: "billdate"

}, {

  title: "outlet",

  data: "outlet"

}];

$('#tbl').DataTable({

  columns: columndef,

  data: data,

  scrollY: '50vh',

  scrollCollapse: true,

  paging: false

});

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">



<table id="tbl" class="table table-striped table-bordered "></table>





javascript jquery html css datatable




javascript jquery html css datatable






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Feb 22 at 11:39









halfer

14.8k759117




14.8k759117










asked Jan 4 at 8:04









manish thakurmanish thakur

19013




19013













  • Have you added the view port tags ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

    – ThivankaW
    Jan 4 at 8:08











  • @ThivankaW yup i have added in my code

    – manish thakur
    Jan 4 at 8:10











  • is your thead's overflowing out of the current view port when using small devices ?

    – ThivankaW
    Jan 4 at 8:14













  • @ThivankaW yupp like that..you just check my snippet please,and resize the browser,you will find the issue

    – manish thakur
    Jan 4 at 8:17



















  • Have you added the view port tags ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

    – ThivankaW
    Jan 4 at 8:08











  • @ThivankaW yup i have added in my code

    – manish thakur
    Jan 4 at 8:10











  • is your thead's overflowing out of the current view port when using small devices ?

    – ThivankaW
    Jan 4 at 8:14













  • @ThivankaW yupp like that..you just check my snippet please,and resize the browser,you will find the issue

    – manish thakur
    Jan 4 at 8:17

















Have you added the view port tags ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

– ThivankaW
Jan 4 at 8:08





Have you added the view port tags ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

– ThivankaW
Jan 4 at 8:08













@ThivankaW yup i have added in my code

– manish thakur
Jan 4 at 8:10





@ThivankaW yup i have added in my code

– manish thakur
Jan 4 at 8:10













is your thead's overflowing out of the current view port when using small devices ?

– ThivankaW
Jan 4 at 8:14







is your thead's overflowing out of the current view port when using small devices ?

– ThivankaW
Jan 4 at 8:14















@ThivankaW yupp like that..you just check my snippet please,and resize the browser,you will find the issue

– manish thakur
Jan 4 at 8:17





@ThivankaW yupp like that..you just check my snippet please,and resize the browser,you will find the issue

– manish thakur
Jan 4 at 8:17












1 Answer
1






active

oldest

votes


















2














I would suggest adding a scrollX: "100%" (usually you need a scrollX if you use scrollY) to your datatables options as well as width: 100% to your table in your css, this should fix your issue. Please check the code below and the fiddle linked at the bottom. 






var data = [{

    "amount": 518212,

    "billdate": "2018-08-04",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 104801,

    "billdate": "2018-08-04",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 138151,

    "billdate": "2018-08-04",

    "outlet": "KOLAR"

  },

  {

    "amount": 628358,

    "billdate": "2018-08-05",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 115223,

    "billdate": "2018-08-05",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 134107,

    "billdate": "2018-08-05",

    "outlet": "KOLAR"

  },

  {

    "amount": 177866,

    "billdate": "2018-08-06",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 66095,

    "billdate": "2018-08-06",

    "outlet": "KOLAR"

  },

  {

    "amount": 284069,

    "billdate": "2018-08-07",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58789,

    "billdate": "2018-08-07",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 67886,

    "billdate": "2018-08-07",

    "outlet": "KOLAR"

  },

  {

    "amount": 313128,

    "billdate": "2018-08-08",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 59939,

    "billdate": "2018-08-08",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 68558,

    "billdate": "2018-08-08",

    "outlet": "KOLAR"

  },

  {

    "amount": 321797,

    "billdate": "2018-08-09",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 64431,

    "billdate": "2018-08-09",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 57352,

    "billdate": "2018-08-09",

    "outlet": "KOLAR"

  },

  {

    "amount": 323556,

    "billdate": "2018-08-10",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58772,

    "billdate": "2018-08-10",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 43722,

    "billdate": "2018-08-10",

    "outlet": "KOLAR"

  },

  {

    "amount": 464127,

    "billdate": "2018-08-11",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 93110,

    "billdate": "2018-08-11",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 62213,

    "billdate": "2018-08-11",

    "outlet": "KOLAR"

  },

  {

    "amount": 626772,

    "billdate": "2018-08-12",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 126933,

    "billdate": "2018-08-12",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 63119,

    "billdate": "2018-08-12",

    "outlet": "KOLAR"

  },

  {

    "amount": 167391,

    "billdate": "2018-08-13",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 27110,

    "billdate": "2018-08-13",

    "outlet": "KOLAR"

  },

  {

    "amount": 275115,

    "billdate": "2018-08-14",

    "outlet": "JAYANAGAR"

  },

  {

    "amount": 58633,

    "billdate": "2018-08-14",

    "outlet": "MALLESHWARAM"

  },

  {

    "amount": 37920,

    "billdate": "2018-08-14",

    "outlet": "KOLAR"

  }

];

var columndef = [{

  title: "amount",

  data: "amount"

}, {

  title: "billdate",

  data: "billdate"

}, {

  title: "outlet",

  data: "outlet"

}];

$('#tbl').DataTable({

  columns: columndef,

  "columnDefs": [{

    "className": "dt-left",

    "targets": "_all"

  }],

  data: data,

  scrollY: "50vh",

  responsive: true,

  paging: false,

  scrollX: "100%",

  scrollCollapse: true

});

#tbl {

  width: 100%!important;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">



<table id="tbl" class="table table-striped table-bordered "></table>





Fiddle : https://jsfiddle.net/bucvf6ek/2/






share|improve this answer
























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54035127%2fdatatable-not-rendering-properly-on-small-device%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    2














    I would suggest adding a scrollX: "100%" (usually you need a scrollX if you use scrollY) to your datatables options as well as width: 100% to your table in your css, this should fix your issue. Please check the code below and the fiddle linked at the bottom. 






    var data = [{
    
    "amount": 518212,
    
    "billdate": "2018-08-04",
    
    "outlet": "JAYANAGAR"
    
  },
    
  {
    
    "amount": 104801,
    
    "billdate": "2018-08-04",
    
    "outlet": "MALLESHWARAM"
    
  },
    
  {
    
    "amount": 138151,
    
    "billdate": "2018-08-04",
    
    "outlet": "KOLAR"
    
  },
    
  {
    
    "amount": 628358,
    
    "billdate": "2018-08-05",
    
    "outlet": "JAYANAGAR"
    
  },
    
  {
    
    "amount": 115223,
    
    "billdate": "2018-08-05",
    
    "outlet": "MALLESHWARAM"
    
  },
    
  {
    
    "amount": 134107,
    
    "billdate": "2018-08-05",
    
    "outlet": "KOLAR"
    
  },
    
  {
    
    "amount": 177866,
    
    "billdate": "2018-08-06",
    
    "outlet": "JAYANAGAR"
    
  },
    
  {
    
    "amount": 66095,
    
    "billdate": "2018-08-06",
    
    "outlet": "KOLAR"
    
  },
    
  {
    
    "amount": 284069,
    
    "billdate": "2018-08-07",
    
    "outlet": "JAYANAGAR"
    
  },
    
  {
    
    "amount": 58789,
    
    "billdate": "2018-08-07",
    
    "outlet": "MALLESHWARAM"
    
  },
    
  {
    
    "amount": 67886,
    
    "billdate": "2018-08-07",
    
    "outlet": "KOLAR"
    
  },
    
  {
    
    "amount": 313128,
    
    "billdate": "2018-08-08",
    
    "outlet": "JAYANAGAR"
    
  },
    
  {
    
    "amount": 59939,
    
    "billdate": "2018-08-08",
    
    "outlet": "MALLESHWARAM"
    
  },
    
  {
    
    "amount": 68558,
    
    "billdate": "2018-08-08",
    
    "outlet": "KOLAR"
    
  },
    
  {
    
    "amount": 321797,
    
    "billdate": "2018-08-09",
    
    "outlet": "JAYANAGAR"
    
  },
    
  {
    
    "amount": 64431,
    
    "billdate": "2018-08-09",
    
    "outlet": "MALLESHWARAM"
    
  },
    
  {
    
    "amount": 57352,
    
    "billdate": "2018-08-09",
    
    "outlet": "KOLAR"
    
  },
    
  {
    
    "amount": 323556,
    
    "billdate": "2018-08-10",
    
    "outlet": "JAYANAGAR"
    
  },
    
  {
    
    "amount": 58772,
    
    "billdate": "2018-08-10",
    
    "outlet": "MALLESHWARAM"
    
  },
    
  {
    
    "amount": 43722,
    
    "billdate": "2018-08-10",
    
    "outlet": "KOLAR"
    
  },
    
  {
    
    "amount": 464127,
    
    "billdate": "2018-08-11",
    
    "outlet": "JAYANAGAR"
    
  },
    
  {
    
    "amount": 93110,
    
    "billdate": "2018-08-11",
    
    "outlet": "MALLESHWARAM"
    
  },
    
  {
    
    "amount": 62213,
    
    "billdate": "2018-08-11",
    
    "outlet": "KOLAR"
    
  },
    
  {
    
    "amount": 626772,
    
    "billdate": "2018-08-12",
    
    "outlet": "JAYANAGAR"
    
  },
    
  {
    
    "amount": 126933,
    
    "billdate": "2018-08-12",
    
    "outlet": "MALLESHWARAM"
    
  },
    
  {
    
    "amount": 63119,
    
    "billdate": "2018-08-12",
    
    "outlet": "KOLAR"
    
  },
    
  {
    
    "amount": 167391,
    
    "billdate": "2018-08-13",
    
    "outlet": "JAYANAGAR"
    
  },
    
  {
    
    "amount": 27110,
    
    "billdate": "2018-08-13",
    
    "outlet": "KOLAR"
    
  },
    
  {
    
    "amount": 275115,
    
    "billdate": "2018-08-14",
    
    "outlet": "JAYANAGAR"
    
  },
    
  {
    
    "amount": 58633,
    
    "billdate": "2018-08-14",
    
    "outlet": "MALLESHWARAM"
    
  },
    
  {
    
    "amount": 37920,
    
    "billdate": "2018-08-14",
    
    "outlet": "KOLAR"
    
  }
    
];
    
var columndef = [{
    
  title: "amount",
    
  data: "amount"
    
}, {
    
  title: "billdate",
    
  data: "billdate"
    
}, {
    
  title: "outlet",
    
  data: "outlet"
    
}];
    
$('#tbl').DataTable({
    
  columns: columndef,
    
  "columnDefs": [{
    
    "className": "dt-left",
    
    "targets": "_all"
    
  }],
    
  data: data,
    
  scrollY: "50vh",
    
  responsive: true,
    
  paging: false,
    
  scrollX: "100%",
    
  scrollCollapse: true
    
});

    #tbl {
    
  width: 100%!important;
    
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
    
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
    

    
<table id="tbl" class="table table-striped table-bordered "></table>





    Fiddle : https://jsfiddle.net/bucvf6ek/2/






    share|improve this answer




























      2














      I would suggest adding a scrollX: "100%" (usually you need a scrollX if you use scrollY) to your datatables options as well as width: 100% to your table in your css, this should fix your issue. Please check the code below and the fiddle linked at the bottom. 






      var data = [{
      
    "amount": 518212,
      
    "billdate": "2018-08-04",
      
    "outlet": "JAYANAGAR"
      
  },
      
  {
      
    "amount": 104801,
      
    "billdate": "2018-08-04",
      
    "outlet": "MALLESHWARAM"
      
  },
      
  {
      
    "amount": 138151,
      
    "billdate": "2018-08-04",
      
    "outlet": "KOLAR"
      
  },
      
  {
      
    "amount": 628358,
      
    "billdate": "2018-08-05",
      
    "outlet": "JAYANAGAR"
      
  },
      
  {
      
    "amount": 115223,
      
    "billdate": "2018-08-05",
      
    "outlet": "MALLESHWARAM"
      
  },
      
  {
      
    "amount": 134107,
      
    "billdate": "2018-08-05",
      
    "outlet": "KOLAR"
      
  },
      
  {
      
    "amount": 177866,
      
    "billdate": "2018-08-06",
      
    "outlet": "JAYANAGAR"
      
  },
      
  {
      
    "amount": 66095,
      
    "billdate": "2018-08-06",
      
    "outlet": "KOLAR"
      
  },
      
  {
      
    "amount": 284069,
      
    "billdate": "2018-08-07",
      
    "outlet": "JAYANAGAR"
      
  },
      
  {
      
    "amount": 58789,
      
    "billdate": "2018-08-07",
      
    "outlet": "MALLESHWARAM"
      
  },
      
  {
      
    "amount": 67886,
      
    "billdate": "2018-08-07",
      
    "outlet": "KOLAR"
      
  },
      
  {
      
    "amount": 313128,
      
    "billdate": "2018-08-08",
      
    "outlet": "JAYANAGAR"
      
  },
      
  {
      
    "amount": 59939,
      
    "billdate": "2018-08-08",
      
    "outlet": "MALLESHWARAM"
      
  },
      
  {
      
    "amount": 68558,
      
    "billdate": "2018-08-08",
      
    "outlet": "KOLAR"
      
  },
      
  {
      
    "amount": 321797,
      
    "billdate": "2018-08-09",
      
    "outlet": "JAYANAGAR"
      
  },
      
  {
      
    "amount": 64431,
      
    "billdate": "2018-08-09",
      
    "outlet": "MALLESHWARAM"
      
  },
      
  {
      
    "amount": 57352,
      
    "billdate": "2018-08-09",
      
    "outlet": "KOLAR"
      
  },
      
  {
      
    "amount": 323556,
      
    "billdate": "2018-08-10",
      
    "outlet": "JAYANAGAR"
      
  },
      
  {
      
    "amount": 58772,
      
    "billdate": "2018-08-10",
      
    "outlet": "MALLESHWARAM"
      
  },
      
  {
      
    "amount": 43722,
      
    "billdate": "2018-08-10",
      
    "outlet": "KOLAR"
      
  },
      
  {
      
    "amount": 464127,
      
    "billdate": "2018-08-11",
      
    "outlet": "JAYANAGAR"
      
  },
      
  {
      
    "amount": 93110,
      
    "billdate": "2018-08-11",
      
    "outlet": "MALLESHWARAM"
      
  },
      
  {
      
    "amount": 62213,
      
    "billdate": "2018-08-11",
      
    "outlet": "KOLAR"
      
  },
      
  {
      
    "amount": 626772,
      
    "billdate": "2018-08-12",
      
    "outlet": "JAYANAGAR"
      
  },
      
  {
      
    "amount": 126933,
      
    "billdate": "2018-08-12",
      
    "outlet": "MALLESHWARAM"
      
  },
      
  {
      
    "amount": 63119,
      
    "billdate": "2018-08-12",
      
    "outlet": "KOLAR"
      
  },
      
  {
      
    "amount": 167391,
      
    "billdate": "2018-08-13",
      
    "outlet": "JAYANAGAR"
      
  },
      
  {
      
    "amount": 27110,
      
    "billdate": "2018-08-13",
      
    "outlet": "KOLAR"
      
  },
      
  {
      
    "amount": 275115,
      
    "billdate": "2018-08-14",
      
    "outlet": "JAYANAGAR"
      
  },
      
  {
      
    "amount": 58633,
      
    "billdate": "2018-08-14",
      
    "outlet": "MALLESHWARAM"
      
  },
      
  {
      
    "amount": 37920,
      
    "billdate": "2018-08-14",
      
    "outlet": "KOLAR"
      
  }
      
];
      
var columndef = [{
      
  title: "amount",
      
  data: "amount"
      
}, {
      
  title: "billdate",
      
  data: "billdate"
      
}, {
      
  title: "outlet",
      
  data: "outlet"
      
}];
      
$('#tbl').DataTable({
      
  columns: columndef,
      
  "columnDefs": [{
      
    "className": "dt-left",
      
    "targets": "_all"
      
  }],
      
  data: data,
      
  scrollY: "50vh",
      
  responsive: true,
      
  paging: false,
      
  scrollX: "100%",
      
  scrollCollapse: true
      
});

      #tbl {
      
  width: 100%!important;
      
}

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
      
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
      
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
      

      
<table id="tbl" class="table table-striped table-bordered "></table>





      Fiddle : https://jsfiddle.net/bucvf6ek/2/






      share|improve this answer


























        2












        2








        2







        I would suggest adding a scrollX: "100%" (usually you need a scrollX if you use scrollY) to your datatables options as well as width: 100% to your table in your css, this should fix your issue. Please check the code below and the fiddle linked at the bottom. 






        var data = [{
        
    "amount": 518212,
        
    "billdate": "2018-08-04",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 104801,
        
    "billdate": "2018-08-04",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 138151,
        
    "billdate": "2018-08-04",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 628358,
        
    "billdate": "2018-08-05",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 115223,
        
    "billdate": "2018-08-05",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 134107,
        
    "billdate": "2018-08-05",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 177866,
        
    "billdate": "2018-08-06",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 66095,
        
    "billdate": "2018-08-06",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 284069,
        
    "billdate": "2018-08-07",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58789,
        
    "billdate": "2018-08-07",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 67886,
        
    "billdate": "2018-08-07",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 313128,
        
    "billdate": "2018-08-08",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 59939,
        
    "billdate": "2018-08-08",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 68558,
        
    "billdate": "2018-08-08",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 321797,
        
    "billdate": "2018-08-09",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 64431,
        
    "billdate": "2018-08-09",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 57352,
        
    "billdate": "2018-08-09",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 323556,
        
    "billdate": "2018-08-10",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58772,
        
    "billdate": "2018-08-10",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 43722,
        
    "billdate": "2018-08-10",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 464127,
        
    "billdate": "2018-08-11",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 93110,
        
    "billdate": "2018-08-11",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 62213,
        
    "billdate": "2018-08-11",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 626772,
        
    "billdate": "2018-08-12",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 126933,
        
    "billdate": "2018-08-12",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 63119,
        
    "billdate": "2018-08-12",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 167391,
        
    "billdate": "2018-08-13",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 27110,
        
    "billdate": "2018-08-13",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 275115,
        
    "billdate": "2018-08-14",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58633,
        
    "billdate": "2018-08-14",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 37920,
        
    "billdate": "2018-08-14",
        
    "outlet": "KOLAR"
        
  }
        
];
        
var columndef = [{
        
  title: "amount",
        
  data: "amount"
        
}, {
        
  title: "billdate",
        
  data: "billdate"
        
}, {
        
  title: "outlet",
        
  data: "outlet"
        
}];
        
$('#tbl').DataTable({
        
  columns: columndef,
        
  "columnDefs": [{
        
    "className": "dt-left",
        
    "targets": "_all"
        
  }],
        
  data: data,
        
  scrollY: "50vh",
        
  responsive: true,
        
  paging: false,
        
  scrollX: "100%",
        
  scrollCollapse: true
        
});

        #tbl {
        
  width: 100%!important;
        
}

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
        
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
        

        
<table id="tbl" class="table table-striped table-bordered "></table>





        Fiddle : https://jsfiddle.net/bucvf6ek/2/






        share|improve this answer













        I would suggest adding a scrollX: "100%" (usually you need a scrollX if you use scrollY) to your datatables options as well as width: 100% to your table in your css, this should fix your issue. Please check the code below and the fiddle linked at the bottom. 






        var data = [{
        
    "amount": 518212,
        
    "billdate": "2018-08-04",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 104801,
        
    "billdate": "2018-08-04",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 138151,
        
    "billdate": "2018-08-04",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 628358,
        
    "billdate": "2018-08-05",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 115223,
        
    "billdate": "2018-08-05",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 134107,
        
    "billdate": "2018-08-05",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 177866,
        
    "billdate": "2018-08-06",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 66095,
        
    "billdate": "2018-08-06",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 284069,
        
    "billdate": "2018-08-07",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58789,
        
    "billdate": "2018-08-07",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 67886,
        
    "billdate": "2018-08-07",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 313128,
        
    "billdate": "2018-08-08",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 59939,
        
    "billdate": "2018-08-08",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 68558,
        
    "billdate": "2018-08-08",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 321797,
        
    "billdate": "2018-08-09",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 64431,
        
    "billdate": "2018-08-09",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 57352,
        
    "billdate": "2018-08-09",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 323556,
        
    "billdate": "2018-08-10",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58772,
        
    "billdate": "2018-08-10",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 43722,
        
    "billdate": "2018-08-10",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 464127,
        
    "billdate": "2018-08-11",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 93110,
        
    "billdate": "2018-08-11",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 62213,
        
    "billdate": "2018-08-11",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 626772,
        
    "billdate": "2018-08-12",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 126933,
        
    "billdate": "2018-08-12",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 63119,
        
    "billdate": "2018-08-12",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 167391,
        
    "billdate": "2018-08-13",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 27110,
        
    "billdate": "2018-08-13",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 275115,
        
    "billdate": "2018-08-14",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58633,
        
    "billdate": "2018-08-14",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 37920,
        
    "billdate": "2018-08-14",
        
    "outlet": "KOLAR"
        
  }
        
];
        
var columndef = [{
        
  title: "amount",
        
  data: "amount"
        
}, {
        
  title: "billdate",
        
  data: "billdate"
        
}, {
        
  title: "outlet",
        
  data: "outlet"
        
}];
        
$('#tbl').DataTable({
        
  columns: columndef,
        
  "columnDefs": [{
        
    "className": "dt-left",
        
    "targets": "_all"
        
  }],
        
  data: data,
        
  scrollY: "50vh",
        
  responsive: true,
        
  paging: false,
        
  scrollX: "100%",
        
  scrollCollapse: true
        
});

        #tbl {
        
  width: 100%!important;
        
}

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
        
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
        

        
<table id="tbl" class="table table-striped table-bordered "></table>





        Fiddle : https://jsfiddle.net/bucvf6ek/2/






        var data = [{
        
    "amount": 518212,
        
    "billdate": "2018-08-04",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 104801,
        
    "billdate": "2018-08-04",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 138151,
        
    "billdate": "2018-08-04",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 628358,
        
    "billdate": "2018-08-05",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 115223,
        
    "billdate": "2018-08-05",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 134107,
        
    "billdate": "2018-08-05",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 177866,
        
    "billdate": "2018-08-06",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 66095,
        
    "billdate": "2018-08-06",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 284069,
        
    "billdate": "2018-08-07",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58789,
        
    "billdate": "2018-08-07",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 67886,
        
    "billdate": "2018-08-07",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 313128,
        
    "billdate": "2018-08-08",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 59939,
        
    "billdate": "2018-08-08",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 68558,
        
    "billdate": "2018-08-08",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 321797,
        
    "billdate": "2018-08-09",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 64431,
        
    "billdate": "2018-08-09",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 57352,
        
    "billdate": "2018-08-09",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 323556,
        
    "billdate": "2018-08-10",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58772,
        
    "billdate": "2018-08-10",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 43722,
        
    "billdate": "2018-08-10",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 464127,
        
    "billdate": "2018-08-11",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 93110,
        
    "billdate": "2018-08-11",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 62213,
        
    "billdate": "2018-08-11",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 626772,
        
    "billdate": "2018-08-12",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 126933,
        
    "billdate": "2018-08-12",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 63119,
        
    "billdate": "2018-08-12",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 167391,
        
    "billdate": "2018-08-13",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 27110,
        
    "billdate": "2018-08-13",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 275115,
        
    "billdate": "2018-08-14",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58633,
        
    "billdate": "2018-08-14",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 37920,
        
    "billdate": "2018-08-14",
        
    "outlet": "KOLAR"
        
  }
        
];
        
var columndef = [{
        
  title: "amount",
        
  data: "amount"
        
}, {
        
  title: "billdate",
        
  data: "billdate"
        
}, {
        
  title: "outlet",
        
  data: "outlet"
        
}];
        
$('#tbl').DataTable({
        
  columns: columndef,
        
  "columnDefs": [{
        
    "className": "dt-left",
        
    "targets": "_all"
        
  }],
        
  data: data,
        
  scrollY: "50vh",
        
  responsive: true,
        
  paging: false,
        
  scrollX: "100%",
        
  scrollCollapse: true
        
});

        #tbl {
        
  width: 100%!important;
        
}

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
        
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
        

        
<table id="tbl" class="table table-striped table-bordered "></table>





        var data = [{
        
    "amount": 518212,
        
    "billdate": "2018-08-04",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 104801,
        
    "billdate": "2018-08-04",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 138151,
        
    "billdate": "2018-08-04",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 628358,
        
    "billdate": "2018-08-05",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 115223,
        
    "billdate": "2018-08-05",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 134107,
        
    "billdate": "2018-08-05",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 177866,
        
    "billdate": "2018-08-06",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 66095,
        
    "billdate": "2018-08-06",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 284069,
        
    "billdate": "2018-08-07",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58789,
        
    "billdate": "2018-08-07",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 67886,
        
    "billdate": "2018-08-07",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 313128,
        
    "billdate": "2018-08-08",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 59939,
        
    "billdate": "2018-08-08",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 68558,
        
    "billdate": "2018-08-08",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 321797,
        
    "billdate": "2018-08-09",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 64431,
        
    "billdate": "2018-08-09",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 57352,
        
    "billdate": "2018-08-09",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 323556,
        
    "billdate": "2018-08-10",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58772,
        
    "billdate": "2018-08-10",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 43722,
        
    "billdate": "2018-08-10",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 464127,
        
    "billdate": "2018-08-11",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 93110,
        
    "billdate": "2018-08-11",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 62213,
        
    "billdate": "2018-08-11",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 626772,
        
    "billdate": "2018-08-12",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 126933,
        
    "billdate": "2018-08-12",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 63119,
        
    "billdate": "2018-08-12",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 167391,
        
    "billdate": "2018-08-13",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 27110,
        
    "billdate": "2018-08-13",
        
    "outlet": "KOLAR"
        
  },
        
  {
        
    "amount": 275115,
        
    "billdate": "2018-08-14",
        
    "outlet": "JAYANAGAR"
        
  },
        
  {
        
    "amount": 58633,
        
    "billdate": "2018-08-14",
        
    "outlet": "MALLESHWARAM"
        
  },
        
  {
        
    "amount": 37920,
        
    "billdate": "2018-08-14",
        
    "outlet": "KOLAR"
        
  }
        
];
        
var columndef = [{
        
  title: "amount",
        
  data: "amount"
        
}, {
        
  title: "billdate",
        
  data: "billdate"
        
}, {
        
  title: "outlet",
        
  data: "outlet"
        
}];
        
$('#tbl').DataTable({
        
  columns: columndef,
        
  "columnDefs": [{
        
    "className": "dt-left",
        
    "targets": "_all"
        
  }],
        
  data: data,
        
  scrollY: "50vh",
        
  responsive: true,
        
  paging: false,
        
  scrollX: "100%",
        
  scrollCollapse: true
        
});

        #tbl {
        
  width: 100%!important;
        
}

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
        
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
        

        
<table id="tbl" class="table table-striped table-bordered "></table>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 4 at 8:35









        Islam ElshobokshyIslam Elshobokshy

        1




        1
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54035127%2fdatatable-not-rendering-properly-on-small-device%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            Monofisismo

            Image
            Monofisismo (do grego: monos - "único, singular" e physis - "natureza") é o ponto de vista cristológico que defende que, depois da união do divino e do humano na encarnação histórica, Jesus Cristo, como encarnação do Filho ou Verbo ( Logos ) de Deus, teria apenas uma única "natureza", a divina, e não uma síntese de ambas. O monofisismo é contraposto pelo diofisismo (ou "diafisismo"), que defende que Jesus preservou em si as duas naturezas. Historicamente, o monofisismo se refere primordialmente à posição dos que (especialmente no Egito e, em menor grau, na Síria) rejeitaram as decisões do Concílio de Calcedônia em 451 (o quarto concílio ecumênico). Os membros mais moderados entre eles, porém, defendem a teologia "miafisita", que se tornou a oficial para as Igrejas Ortodoxas Orientais. Muitos ortodoxos orientais, porém, rejeitam essa classificação, mesmo como um termo genérico, mas ele é amplamente utilizado na literatura históri...
            Read more

            Angular Downloading a file using contenturl with Basic Authentication

            Image
            0 I have a contentUrl when user clicks on that,file should be downloaded. If I try to browse the contentUrl in the browser it asks for Userid and password.I believe this is Basic Authentication.I dont want user to enter UserId and Password so I am passing it Authorization(Please see below code). Url looks some thing like this: http://XXX.XXX.XX.XXX:8080/flowable-rest/service/runtime/tasks/90875/attachments/90555/content let username : string = 'admin'; let pwd : string = 'test'; let headers = new Headers(); headers.set('Accept', 'text/json'); headers.append('Content-Type', 'application/json'); headers.set('Access-Control-Allow-Origin', '*'); headers.set('Access-Control-Allow-Methods','POST, GET, OPTIONS, PUT, DELETE'); head...
            Read more

            Olmecas

            Image
            Monumento 1, uma das quatro cabeças colossais encontradas em La Venta, com altura aproximada de 3 metros Olmecas é a designação do povo e da civilização que estiveram na origem da antiga cultura pré-colombiana da Mesoamérica e que se desenvolveram nas regiões tropicais do centro-sul do atual México durante o pré-clássico, próximo de onde hoje estão localizados os estados mexicanos de Veracruz e Tabasco, no Istmo de Tehuantepec, numa zona designada área nuclear olmeca. A cultura olmeca floresceu nesta região aproximadamente entre 1500 e 400 a.C., [ 1 ] e crê-se que tenha sido a civilização-mãe de todas as civilizações mesoamericanas que se desenvolveram posteriormente. [ 2 ] No entanto, desconhece-se a sua exacta filiação étnica, ainda que existam numerosas hipóteses colocadas para tentar resolver esta questão. O etnónimo olmeca foi cunhado pelos arqueólogos do século XX, e não devem confundir-se com os muito posteriores olmecas-xicalancas que ocuparam vários locais do México...
            Read more