Framework7: Scrolling inside animated tabs not working

[shaulhadar]

Hi Vlad, I have been working with the kitchen sink and learning it and also the f7 docs. I have made some test, and added the animation option to the tabs in the kitchen sink project. But when i do this, the content inside the tabs is not scrollable any more. if i use the regular tabs without animation, than it is scrollable.

this is the code i have in the tabs page:

Is this a bug or did I miss anything?

Thanks,
Shaul.

[shaulhadar]

I am not able to paste my code right, I am a bit new in pasting code in github and such, how am i supposed to do it?

thanks...

[nolimits4web]

Look at Syntax highlighting here https://guides.github.com/features/mastering-markdown/

[nolimits4web]

Yes, animated tabs are made a bit similar to Slider, so the each tab has the same 100% height. So to make scrolling works you may just wrap tab's content with some div like:

<div class="tab">
  <div class="tab-content">...</div>
</div>

And add this in CSS:

.tab-content {
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

[shaulhadar]

That's great, Vlad. Thank you very much :)

[TawabG]

If you're like me and you copied the get started lay-out from the docs
you'll need to change this class <div class="pages">

Example:

.pages {
   overflow: auto;
  -webkit-overflow-scrolling: touch;
}

That'll fix it.

[felipefrancisco]

   .tabs-animated-wrap > .tabs > .tab  {
     overflow: auto;
     -webkit-overflow-scrolling: touch;
   }

This solved my issue.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.