Topic: [Bug] Datatable element do not scroll properly after search
Expected behavior When I scroll to the bottom of the table (when it's set to show more than 10 contacts) and I search for a record it should scroll up and show me the search results.
Actual behavior it brings up the results, but the scroll stays at the bottom of the page and I have to scroll up all the way even if I have one record to see the search results. in the picture below I have 15 results in the search, but the table shows empty. I have to scroll up to see them. Resources (screenshots, code snippets etc.)
kpienkowska staff answered 2 years ago
Can you recreate this problem in snippet. I can't recreate it since the expected behavior of search in datatable makes the table shorter - there shouldn't be a need to scroll. Look at the example in the docs: http://localhost:1313/docs/standard/data/datatables/#section-search
Also, you've posted this question from a free account. If you're using free package datatable will not work as expected since it is a pro component.
VIS answered 2 years ago
I've recreated the problem in this snippet:
https://mdbootstrap.com/snippets/standard/itvis-org-au/4344578#html-tab-view
Follow these steps to see the bug: - Set the table view to 200 - Scroll down using the table scroll option until you reach the last record (which is "Tatyana Fitzpatrick") - While on the last record, scroll up with the browser - Now search for the last record (Tatyana Fitzpatrick)
You'll see an empty table. It's actually found the record but it doesn't scroll up. One more issue, you can scroll up and see the results, but as soon as you scroll down once the results disappear (just for once).
I've already purchased the Premium account and using the package, it's just expired now.
kpienkowska staff answered 2 years ago
Now I see what is the problem. I'm sorry to say that there is a bug with maxHeight
option. The table is not being scrolled up when search results are displayed in the situation you described.
I've adjusted your snippet to show you a workaround until we prepare a fix: https://mdbootstrap.com/snippets/standard/kpienkowska/4345786
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 4.4.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No