How to add scroll-y to one cell in a row?

mark789

My test case is at https://jsfiddle.net/pmi2018/8ryhtacp/

Description of problem:
As the browser window shrinks/grows in size, the "Notes" column makes each row height grows/shrinks. I would like to add a vertical scrollbar to the "Notes" column so the row height does not change with different browser window sizes (e.g from cell phone screen to large desktop screen), and the user can scroll through the note for that row without affecting the other notes or row sizes. I would like to limit the the row size to roughly 2 lines of text so the user see there is more text in the "Notes" column and can read the start of the note.

I am also open to suggestions of other ways to keep the table rows to one or two lines and still allow the user to read part of the note and then have a mechanism to read the entire note. There are normally links in the notes, but I took them out to make the test case easier to use.

Thanks!

allan

You are 90% of the way there! Use a max-height on the div to force it to a smaller height and let the scrolling kick in.

Updated example: https://jsfiddle.net/67uraLk5/ (I used a class rather than an inline style).

Allan

kthorngren

You could do something like this Stack Overflow thread suggests. Use columns.classname to assign a class to the td and create a CSS to set the desired height. Then use columns.render to place the cell data in a div that has overflow: auto set.

It might be easier to use the ellipsis plugin.

Kevin

mark789

@allan Unfortunately, your fiddle does not load for me. All i get is the bouncing cloud. Can you check the url? I would love to see what you did!

kthorngren

I think there were issues with jsfiddle as I couldn't open it either. But now I can. Try again. In case you can't open it he did this:

td div.scrolling-cell {
  overflow: auto;
  max-height: 3rem;
  min-width: 30rem;
}

<td class="mb-0 text-lg font-weight-bold"  style="max-height: 20px !important; overflow: hidden;"><div class="scrolling-cell">Three cotton balls and three packing peanuts were used to cushion the egg. The predicted altitude was 23 feet. The rocket "shot high and to the left". The parachute "came straight out" and the rocket spun on its way to the ground. It landed on the grass next to the first base fence. This rocket won the challenge for this class. <a href="https://hopirockets.com/gallery_rockets/index.php/Jan_9_2023/Banister/Apollo_13_Jr" target="_blank">Pictures</a></div></td>

Kevin

mark789

@kthorngren Thanks for the ellipsis plugin idea. It sounds much better than my vertical scrolling idea.

I seem to be having an issue getting it to work. I forked my original fiddle to try it out.
https://jsfiddle.net/pmi2018/x2nktpus/

mark789

@kthorngren Thanks. I can now see what @allan did.

It is what I originally envisioned. I still like the ellipses idea. Can you see what I missed in my attempt at implementing it?

mark789

@allan Just what I envisioned! One small nit. When I shrink the browser window, the whole table has to be scrolled to the right to make the vertical scrollbars visible. Is there a way to not have the horizontal scrolling?

kthorngren

Can you see what I missed in my attempt at implementing it?

The fiddle doesn't have any Javascript code to init Datatables nor does it load the ellipsis plugin. Possibly you didn't save the changes. I updated the example here with a couple more Datatables CSS includes to support BS5:
https://jsfiddle.net/4r8y3boe/2/

I removed the div in the cell data.

The version of Datatables you have in the test case doesn't support the DataTable API so you will see this error:

Uncaught ReferenceError: DataTable is not defined

This was added to a later version of Datatables. Either upgrade your Datatables or use the old syntax:

render: $.fn.dataTable.render.ellipsis( 10 )

Kevin

mark789

@kthorngren You are correct, I did not save the fiddle after I made the changes. https://jsfiddle.net/pmi2018/x2nktpus/2/

Thanks for the tip on updating the DataTables package. The site is old, so I probably need to update a few other packages.

Thanks so much!!!