[v2] Views as tab in panel question

Questions
1

I want to implement several views as tab in the right panel, but it seems doesn’t work, after inspected element in Chrome, seems the view is positioned in the main view area, is it correct? Here is a sample code

<div class=“panel”......>
  <div class=“tabs views”......>
    <div class=“tab view”......>
    </div>
    <div class=“tab view”......>
    </div>
    <div class=“tab view”......>
    </div>
  </div>
</div>
2

Don’t set “views” class here

3

it still doesn’t work, here is my code, the tabbar toolbar is showing at the top and the view doesn’t show (height=0), also, there is accordion in one of the tab, the view cannot scroll after the accordion is expanded, any idea?

			<div class="panel panel-right panel-reveal">
			<div class="tabs theme-dark">
				<div id="mysg-tabs" class="toolbar tabbar tabbar-labels tabbar-labels-through" style="z-index:5001;">
					<div class="toolbar-inner">
						<a href="#tab-bookmark" class="tab-link tab-link-active">
							<i class="icon f7-icons material-icons active">bookmark</i>
							<i class="icon f7-icons material-icons inactive">&#xE867;<!--bookmark_border--></i>
							<span class="tabbar-label" data-txt="mysg_tabBookmark">Bookmark</span>
						</a>
						<a href="#tab-read-later" class="tab-link">
							<i class="icon f7-icons material-icons active">&#xE924;<!--watch_later--><span class="badge color-red tab-read-later-badge"></span></i>
							<i class="icon f7-icons material-icons inactive">schedule<span class="badge color-red tab-read-later-badge"></span></i>
							<span class="tabbar-label" data-txt="mysg_tabReadLater">Read later</span>
						</a>
						<a href="#tab-history" class="tab-link">
							<i class="icon f7-icons material-icons active">&#xE88C;<!--hourglass_full--></i>
							<i class="icon f7-icons material-icons inactive">&#xE88B;<!--hourglass_empty--></i>
							<span class="tabbar-label" data-txt="mysg_tabHistory">History</span>
						</a>
						<a href="#tab-chat" class="tab-link /*disabled*/">
							<i class="icon f7-icons material-icons active">&#xE0CA;<!--chat_bubble--><span class="badge color-red"></span></i>
							<i class="icon f7-icons material-icons inactive">&#xE0CB;<!--chat_bubble_outline--><span class="badge color-red"></span></i>
							<span class="tabbar-label" data-txt="mysg_tabChats">Chats</span>
						</a>
					</div>
				</div>
				<div id="tab-bookmark" class="view view-bookmark tab tab-active">
				</div>
				<div id="tab-read-later" class="view view-read-later tab">
				</div>
				<div id="tab-history" class="view view-history tab">
				</div>
				<div id="tab-chat" class="view view-chat tab">
				</div>
			</div>
		</div>
4

is there any function to let the view know the height is changed as the accordion opened? thanks

5

finally get the tabs show correctly by moving the tabbar toolbar after the view and set the tabs height as below, i guess it’s not the best way. and the expanded accordion still not able to be scrolled in the view unless i switch to other tab and switch back, any idea? Thanks a lot

			<div class="panel panel-right panel-reveal">
			<div class="tabs theme-dark" style="height:calc( 100% - 50px);">
				<div id="tab-bookmark" class="view view-bookmark tab tab-active">
				</div>
				<div id="tab-read-later" class="view view-read-later tab">
				</div>
				<div id="tab-history" class="view view-history tab">
				</div>
				<div id="tab-chat" class="view view-chat tab">
				</div>
				<div id="mysg-tabs" class="toolbar tabbar tabbar-labels tabbar-labels-through" style="z-index:5001;">
					<div class="toolbar-inner">
						<a href="#tab-bookmark" class="tab-link tab-link-active">
							<i class="icon f7-icons material-icons active">bookmark</i>
							<i class="icon f7-icons material-icons inactive">&#xE867;<!--bookmark_border--></i>
							<span class="tabbar-label" data-txt="mysg_tabBookmark">Bookmark</span>
						</a>
						<a href="#tab-read-later" class="tab-link">
							<i class="icon f7-icons material-icons active">&#xE924;<!--watch_later--><span class="badge color-red tab-read-later-badge"></span></i>
							<i class="icon f7-icons material-icons inactive">schedule<span class="badge color-red tab-read-later-badge"></span></i>
							<span class="tabbar-label" data-txt="mysg_tabReadLater">Read later</span>
						</a>
						<a href="#tab-history" class="tab-link">
							<i class="icon f7-icons material-icons active">&#xE88C;<!--hourglass_full--></i>
							<i class="icon f7-icons material-icons inactive">&#xE88B;<!--hourglass_empty--></i>
							<span class="tabbar-label" data-txt="mysg_tabHistory">History</span>
						</a>
						<a href="#tab-chat" class="tab-link /*disabled*/">
							<i class="icon f7-icons material-icons active">&#xE0CA;<!--chat_bubble--><span class="badge color-red"></span></i>
							<i class="icon f7-icons material-icons inactive">&#xE0CB;<!--chat_bubble_outline--><span class="badge color-red"></span></i>
							<span class="tabbar-label" data-txt="mysg_tabChats">Chats</span>
						</a>
					</div>
				</div>
			</div>
		</div>
1 Like