1

Context

We deal with a lot of data in our product. Mostly we design list views in such a way that when you click on any row in the list view you get to see the detail view on the right side of the list in the same screen. This had not caused problems until recently when our developers found an issue with this view.

Question

We have implemented page scroll only and always try to avoid inline scrolling. If we select a row which is a bit down in the list view and the page has been scrolled due to it then we are not able to see the detail panel on the right because that can only be viewed if we scroll back up.

Reference image attached below:

enter image description here

And if we scroll back to top, then we can see the detail of the selected row but now the selected row is not visible in the screen.

Reference image attached below:

enter image description here

How can we tackle this issue by keeping the same view?

We can always show the detail in some other screen or a modal dialog but that is not the point of it because we will always need parallel views in one or the other.

1

Your listview and details should use separated scroll bars (and in your case you need just a listview scroll).

enter image description here

If you add more features to the sidebar:

enter image description here

Google Analytics is a great example. They use a header with a close button and they are sorting data below using tabs.

enter image description here

  • Inline scrolling is not a good option. Refer to this article. Moreover I don't think the problem will be solved if I give scroll to the listview only. I'll always have to scroll up page to view details – Sheraz Sep 2 '18 at 15:52
  • Why it isn't a good option? Am I missing something here? You got your navigation already fixed, and details should also be fixed and behave like a sidebar. – Marko Cadjenovic Sep 2 '18 at 16:45
  • What if the program preferences on the right increase. Like for example we have 12 program preferences (12 radio buttons), in that case the proceed will also shift down and the list will increase. How will the user see the remaining buttons if you set the sidebar fixed? – Sheraz Sep 3 '18 at 6:04
  • Both should be scrollable. I added new screenshots into the answer. – Marko Cadjenovic Sep 3 '18 at 12:53

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.