[SOLVED] FAB Morph into toolbar tabbar content block

Hello,

I would like the fab buttons to only appear in one tab and not both tabs.

As of now it seems to appear in both. If I place the code related to the fab buttons in the tab content block they appear to loose their fab characteristics.

I have come across something related to morph-to data element in the documentation but so far I have been unable to achieve that.

This is the code I am working with.

<div class="toolbar toolbar-top tabbar">
	<div class="toolbar-inner">
		<a href="#tab-1" class="tab-link tab-link-active">Header</a>
		<a href="#tab-2" class="tab-link">Timeline</a>
	</div>
</div>

<div class="fab fab-right-bottom">

	<a href="/">
		<i class="icon material-icons md-only">edit</i>
	</a>
	
</div>

<div class="fab fab-left-bottom">

	<a href="/">
		<i class="icon material-icons md-only">shopping_basket</i>
	</a>
	
</div>

<div class="tabs">
					
	<div id="tab-1" class="page-content tab tab-active">
									
		<div class="block">
																								
			<div class="list inline-labels no-hairlines-md">
				<ul>
					
					<li class="item-content item-input">
						<div class="item-inner">
							<div class="item-title item-label">Order Number</div>
							<div class="item-input-wrap">
								<input type="text" disabled id="order_no_input" placeholder="">
							</div>
						</div>
					</li>

					
																													
				</ul>
			</div>
		
			<div class="row">
				
				<div class="block block-strong">
					
					 <p>Stuff.</p>
					
				</div>
				
			</div>
		

		</div>
	
	</div>
	
	<div id="tab-2" class="page-content tab">
	
		<div class="block">
		
			<div class="block block-strong">
					
				 <p>My other stuff</p>
				
			</div>

		</div>

	</div>
	
</div>

FAB must be in each tab, and tab should have the following structure:

.tab
  .fab
  .page-content
1 Like

Or use it as it is, but hide/show relevant FAB on relevant tab hide/show

Thanks. I noted the order of placement affects the behaviour of the FAB buttons.