Colvis/Column visibility with scroll bar?

rosaricla

I have a table with a complex header (huge amount of columns). I am using the colvis button to show a list of the columns in the table and to toggle column visibility. I would to add to that list a scroll bar. I know that you can add columns to the list but I would like to add a scroll bar to facilitate to search the desired column.

I would like something like that...

It would be possible?

Thank you in advanced.

colin

Hi @rosaricla ,

There are a few threads like this - such as this example from this thread. Hopefully that'll get you going,

Cheers,

Colin

rosaricla

Thank you @colin ! But I was looking to add the scroll bar in the colvis button (https://datatables.net/extensions/buttons/examples/column_visibility/simple.html ) and not in the column filtering as in the example. Any idea?

Thanks,
Rosa

allan

dt-button-collection {
    max-height: 100px;
    overflow-y: scroll;
}

will do it.

Allan

rosaricla

Hi @allan ! Thank you! But did not work...
I have tried to modify dt-button-collection changing it by what you suggested but it is still not working.

I am using the following css file: https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.css

There I have changed:

div.dt-button-collection {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  margin-top: 3px;
  padding: 8px 8px 4px 8px;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-color: white;
  z-index: 2002;
  border-radius: 5px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  -webkit-column-gap: 8px;
  -moz-column-gap: 8px;
  -ms-column-gap: 8px;
  -o-column-gap: 8px;
  column-gap: 8px;

}

To:

div.dt-button-collection {
    max-height: 100px;
    overflow-y: scroll;
}

colin

Hi @rosaricla ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

EndLessQs

Was there a solution to this question?

EndLessQs

@allan way works great it was just missing "." so it is:

.dt-button-collection {
max-height: 100px;
overflow-y: scroll;

}
in the view page. I am new to this site is there a way to delete user old comments and can we vote up comments?
thanks