List view in Sencha Touch inside of Tab panel with scroll

Question

I have a list view in a tab panel. The tab panel has two tab bars one at the top and the other at the bottom. I have the two tab bars floating, so when the list scrolls, it scrolls behind these tab bars at the top and at the bottom.

Everything is good except now, the top portion and the bottom portion of the list is always behind the tab panel and is unclickable. Also, when the list loads for the first time, I need the list to start just beneath the top tab bar. And, on reaching the end of the list, I need the list to end right above the bottom tab bar, so all items in the list are clickable.

I somewhat managed to do so by doing:

.x-tabbar + div .x-scroll-view {
    padding-top: 3.2em;
}

But, this only fixes the problem at the top of the list. At the bottom, no matter how much padding-bottom I give to .x-scroll-view, the bottom doesn't budge.

How do I fix this? Any help is much appreciated! Thanks!

Edit: I know I can add spacers to the list and set their height as shown here: https://fiddle.sencha.com/#fiddle/26i , but I'm looking for a CSS-only solution without the need for adding any additional containers.

Answer 1

.x-tabbar + div .x-scroll-scroller{ padding: 3.2em 0; } 

应该这样做。