Scroll Bar Issue

Scroll Bar Issue

genesys_kumargenesys_kumar Posts: 24Questions: 6Answers: 0

Code Link: https://github.com/ramkumar2325/DataTable_Sample


I have uploaded source code here, I'm trying setup vertical scroll bar based on the example given.

let table = $('#agentSelectionTable').DataTable({
data: availableAgents,
scrollCollapse: true,
scrollY: '50vh',
"columns": [{
"data": "userName"
},
{
"data": "firstName"
},
{
"data": "lastName"
},
{
"data": "startDate"
},
{
"data": "endDate"
},
{
"data": "replacementAgent"
},
{
"data": "comment"
}
],
columnDefs: [{
targets: 6,
render: $.fn.dataTable.render.ellipsis(20)
}],
"createdRow": function (row, data, index) {
if (data.replacementAgent != "") {
$('td', row).eq(5).addClass('highlight');
}
}
});

Issue is: Column header shrinking (attached screenshot for reference)
Scenario is: from the screenshot you can see page design and I'm loading Datatable in one of the DIV on right bottom. I've 2 monitor's. On one monitor i can see all 10 rows and on second monitor i can see only 5 rows so when i move page from one screen to another screen i'm resizing the screen so i need to setup scrollY param value dynamically.

Question: how to setup the scrollY value dynamically when resizing the page and why the column header is shrinking

Please help me with this issue.

Thanks,
Kumar

Answers

  • genesys_kumargenesys_kumar Posts: 24Questions: 6Answers: 0

    First images shows initial page load and Datatable view
    Second View - on big screen all seems good except the scrollY is "150Px" - which i need help to setup dynamically
    Third View - on small screen all seems good.

  • allanallan Posts: 60,962Questions: 1Answers: 9,939 Site admin
    edited March 2022

    Hi,

    Thanks for putting the test case together. However, it looks like there are a bunch of scripts missing I'm afraid:

    I haven't been able to run it to identify what the issue is.

    Thanks,
    Allan

  • allanallan Posts: 60,962Questions: 1Answers: 9,939 Site admin

    Part of the issue was my file system is case sensitive, so I moved scripts to Scripts and a few of the files loaded, but there are still errors unfortunately and nothing appears to happen.

    Allan

  • genesys_kumargenesys_kumar Posts: 24Questions: 6Answers: 0

    Hi Allan,

    First I apologize, i have created a separate discussion where Kevin is checking with the test case "http://live.datatables.net/sexicozi/1/edit?html,css,js,console,output".

    Please forgive me for the duplicate request

Sign In or Register to comment.