1

I'm basically a back end devlopper but I need to create a page displaying data in diiferent tables.

Some of the data rows may contain very large content but I chosed to make all rows the same height. So in that case I'm resizing the row to hide part of the content and I made them clickable to resize the div.

Now I'm looking to make it look like there is more data to display and I want to indicate it without using any button and a simple cursor change doesn't seem to be enough.

So far I tried to add a "fade" effect on these divs but it looks awful and as a UX rookie, I'd like some advice from more competent people. Here are screenshots to help you visualize.

Reduced div Expanded div

Thanks in advance.

Edit:

I'd like a solution that doesn't need to add any JS code or HTML elements, could it be possible to simply use CSS ? i.e. Is there any visual trick to indicate that you can click on the div to get content ? (I've noticed that some websites do the fading trick, are there any others ?)

1

When content is truncated, ellipses (...) are a good way to indicate this to the user.

Something like this:

ellipses example

1

I would do something like this : enter image description here

Divs with info & the white part would be hidden with a centered arrow and a shadow to show more data. Usually the less important data should be added there.

0

I think a combination of the answers above is a good solution. You should provide some sort of affordance or indication that there is more data there, otherwise the user is forced to guess or use trial and error

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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