1

I have a grid of selectable rows. Each time a user selects a row a new panel will come from the botton of the page to show its related "Events" and "Comments".

This way they'll be able to access quickly to relevant information regarding its row.

  • When no row is selected (on page load) no panel is shown.
  • The panel has an option "Keep open" that will enable users to change from row to see the Events and Comments of the selected row.
  • If the option "Keep open" is turned off, then the panel will be kept hidden all the time unless the user right clicks on the row (or uses an icon in it) to display the comments and events for the selected row. If the users selects any other row, the panel will be kept hidden unless the right click or the icon is used again.

With this in mind, the problem I'm facing now is that if I select a row which is in the very bottom of the page, once the panel appears it will hide the selected row leaving it under the panel itself.

This is far from idea. Any suggestions?

enter image description here

Improve this question
4
  • 3
    Why not tweak your design to create a buffer of space when a panel is showing? You can express your height in terms of vh to help create that buffer. Adjusting your styling is likely easier than a UX overhaul, and it seems to make the most sense in this situation
    – Daniel Brown
    Commented Oct 6, 2015 at 16:39
  • I ttached an image in case it helps
    – Steve
    Commented Oct 7, 2015 at 9:25
  • My reply and @stefan Wasserbauer's answer still hold.
    – Daniel Brown
    Commented Oct 7, 2015 at 12:58
  • @DanielBrown is right. Just tell your front-end engineers to add padding to the bottom of the page holding the table equivalent to the max-height of the bottom panel.
    – Eric Stoltz
    Commented Apr 27, 2017 at 21:34

2 Answers 2

Reset to default
2

From the technical aspect it is easily solved by a "scroll to row". Possible in GWT, jQuery and so on...

This very same behaviour you will get, when you tap on an input field of a web form on an ipad. As soon as the keyboard appears from the bottom, the input field moves upwards to stay in the view.

Found a gif on the net showing the principle

enter image description here

Improve this answer
0

I would simply turn rows into an accordion and move all row-related metadata to the area that opens under the selected row. NB: this won't work if the footer with metadata is an universal element and has some additional functionality to it.

Or move the footer to the front layer so that the scrollable area doesn't include it and only includes the table. This way lower rows will not be scrolled under the footer.

Improve this answer

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.