Accordion-item scrolls incorrectly

Questions
1

Thank you A LOT for this great framework7!
I faced a difficulty. I’m using accordion-item, and when it contains a lot of text (which can’t fit on a screen), it scrolls in a wrong way.
Steps to reproduce:

  • make two accordions with large texts in them both
  • open first accordion (this would work nicely)
  • open second one (to do it, scroll down a little)
  • you would see that second accordion after opening will be scrolled not to its head, but somewhere below it, making the first lines of text invisible (they are above the screen now)
    How to fix it?

I use Accordion List View layout (sorry, can’t see a way to embed the code here).
The link to documentation: https://framework7.io/docs/accordion#accordion-list-view

2

Can you please copy your code into https://codepen.io/ and provide a link to it, we’ll be able to debug better with a code sample.

3

Check in browser: https://dzkip.csb.app
Please open it in mobile view (CTRL + SHIFT + J in Chrome), and set screen width so that when “Push #1” element is opened it takes more then one screen in height.
Then scroll down to “Push #2” (without closing accordion) and click it.
You should see that “Push #2” accordions open but scrolls somewhere in the middle of its height, accordion title “Push #2” is invisible, and first lines of its text are also invisible.
Is it enough information, or should I provide screenshots etc.?
The code: codesandbox

4

I see your problem, but unfortunately I don’t believe there are custom animation options for the Accordian element.

One option you could try would be using Dom7 to animate the viewport after the accordian has opened. You could use .scrollTop() to get the pixal position of your title element, and then use .scrollTo(left, top, duration, callback) to animate the view up to that position.

Check the ‘scroll’ section of Dom7 - Custom DOM Library | Framework7 Documentation for details.

5

No luck yet. scrollTop() always returns 0 despite the position of the .item-title:
app.on(‘accordionOpened’, function (el) {
let titleEl =$(el).find(’.item-title’)[0]
console.log($(titleEl).scrollTop()) // always 0
});