I have a datatable with various columns, including one that could potentially include 4k char output. I currently set up the columns to display 200px worth of text. If they want to see the rest of it, they just hover over it and a pop-up appears.

This works fine, except when users are close to the right-side or bottom of the window. The pop-up extends from the cursor down and to the right, so the pop-up causes issues with scrollbars and such.

I could probably use some javascript and some math to figure out better places to display the output (if close to bottom right then, instead, pop-up window towards the top-left, etc) But I'm also looking better ideas for displaying this kind of information.

1 Answer 1


There are multiple ways to handle the situation. Based on your content and screen dimensions/resolutions appropriate solutions can be chosen.

Here is one: Clipped Content In this case, excess content in a cell is hidden and an ellipsis is shown allowing user to explore.

Here is another: Converting excess columns to child row In this case depending on the screen width and content, the right most columns care hidden and shown as child rows.

There are many more options like freezing a few columns and then allows the user to swipe through the remaining columns (like in excel).

To sum it up, there is no right way of doing it! Asses the content and the delivery mechanism, then choose the solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.