Ripple effect not working inside Tabs


#1

Hi,

I am currently facing an issue with the ripple effect not working when placed inside Tabs component. Here’s my code:

<div class="toolbar tabbar">
	<div class="toolbar-inner">
	<a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
	<a href="#tab-2" class="tab-link">Tab 2</a>
	<a href="#tab-3" class="tab-link">Tab 3</a>
	</div>
</div>
<div class="tabs-swipeable-wrap">
	<div class="tabs">
		<div id="tab-1" class="page-content tab tab-active">
			<div class="list">
				<ul>
					<li>
						<a href="#" class="item-link item-content">
							<div class="item-media">
								<i class="material-icons">assignment_ind</i>
							</div>
							<div class="item-inner">
								<div class="item-title">Carlo Fontanos</div>
								<div class="item-after">88%</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="item-link item-content">
							<div class="item-media">
								<i class="material-icons">assignment_ind</i>
							</div>
							<div class="item-inner">
								<div class="item-title">Ivan Petrov</div>
								<div class="item-after">82%</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="item-link item-content">
							<div class="item-media">
								<i class="material-icons">assignment_ind</i>
							</div>
							<div class="item-inner">
								<div class="item-title">Andre Mclenesh</div>
								<div class="item-after">78%</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="item-link item-content">
							<div class="item-media">
								<i class="material-icons">assignment_ind</i>
							</div>
							<div class="item-inner">
								<div class="item-title">Greg Adamson</div>
								<div class="item-after">65%</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="item-link item-content">
							<div class="item-media">
								<i class="material-icons">assignment_ind</i>
							</div>
							<div class="item-inner">
								<div class="item-title">Ben Madison</div>
								<div class="item-after">64%</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="item-link item-content">
							<div class="item-media">
								<i class="material-icons">assignment_ind</i>
							</div>
							<div class="item-inner">
								<div class="item-title">James Galiger</div>
								<div class="item-after">52%</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="tab-2" class="page-content tab">
			<div class="list">
				<ul>
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Carlo Fontanos</div> <div class="item-after">88%</div> </div> </a> </li>
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Greg Adamson</div> <div class="item-after">82%</div> </div> </a> </li>
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Ben Madison</div> <div class="item-after">78%</div> </div> </a> </li>
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Ivan Petrov</div> <div class="item-after">65%</div> </div> </a> </li>
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Andre Mclenesh</div> <div class="item-after">64%</div> </div> </a> </li>
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">James Galiger</div> <div class="item-after">52%</div> </div> </a> </li>
				</ul>
			</div>
		</div>
		<div id="tab-3" class="page-content tab">
			<div class="list">
				<ul>
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Andre Mclenesh</div> <div class="item-after">88%</div> </div> </a> </li> 
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Ben Madison</div> <div class="item-after">82%</div> </div> </a> </li> 
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Carlo Fontanos</div> <div class="item-after">78%</div> </div> </a> </li> 
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Greg Adamson</div> <div class="item-after">65%</div> </div> </a> </li> 
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Ivan Petrov</div> <div class="item-after">64%</div> </div> </a> </li> 
					<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">James Galiger</div> <div class="item-after">52%</div> </div> </a> </li>
				</ul>
			</div>
		</div>
	</div>
</div>

#2

Try to add:

<div class="tabs-swipeable-wrap" data-touch-move-stop-propagation="false">

#3

Hi, unfortunately that didn’t work for me. Any other way to fix this?


#4

Hi, any update, please?