Daniel Bendel Thanood

Indicator issue when using tabs with waves

Waves make the container position: relative; and because of that the position of the child (a in the tab li) cannot be calculated correctly, it's always at left: 0.

To work around this, set this in a css file (like in app.css here):

[md-tabs] .waves-effect {
  position: static;
}

	<template>
	<div class="tabs-basic-use">
	<md-navbar md-auto-height="true">
	<a href="#/samples/navbar" class="brand-logo"><span>Brand logo</span></a>
	<ul class="hide-on-med-and-down right">
	<li md-waves><a>About</a></li>
	<li md-waves><a>Installation</a></li>
	<li md-waves><a>Project Status</a></li>
	</ul>
	<ul md-tabs="transparent: true;" class="z-depth-1">

	<template>
	<div class="row">
	<div style="margin-bottom: 10px;">
	<button md-button click.delegate="selectTab2()">select tab 2</button><br /><br />
	Selected tab: ${demotabs.selectedTab \| stringify}
	</div>

	<ul md-tabs md-tabs.ref="demotabs" class="z-depth-1">
	<li md-waves="color: primary;"><a class="active" href="#tab_1">Tab 1</a></li>
	<li md-waves="color: primary;"><a href="#tab_2">Tab 2</a></li>

	<template>
	<require from="./logger"></require>
	<div class="row">

	<ul md-tabs="on-show.call: onShow(element)" md-on-selected.delegate="onTabSelected($event)" class="z-depth-1">
	<li md-waves="color: primary;"><a class="active" href="#tab1">Tab 1</a></li>
	<li md-waves="color: primary;"><a href="#tab2">Tab 2</a></li>
	<li md-waves="color: primary;"><a href="#tab3">Tab 3</a></li>
	<li md-waves="color: primary;"><a href="#tab4">Tab 4</a></li>
	</ul>

	<template>
	<div>
	It's on the right edge. Make sure, your viewport is big enough.
	</div>
	<div>
	<button md-button="flat: true;" md-waves="color: primary;" click.delegate="toggleSideNav()">toggle</button>
	</div>

	<md-sidenav view-model.ref="sideNav" md-fixed.bind="show" md-edge="right"><!-- md-edge="right" -->
	<ul>

	<template>
	<div>
	<a md-sidenav-collapse="ref.bind: sideNavLeft;" md-button md-waves>Left SideNav</a>
	<a md-sidenav-collapse="ref.bind: sideNavRight;" md-button md-waves>Right SideNav</a>
	<a md-sidenav-collapse="ref.bind: sideNavLarge;" md-button md-waves>Larger right SideNav</a>
	<a md-sidenav-collapse="ref.bind: sideNavCloseOnClick;" md-button md-waves>Close on click</a>
	</div>

	<!-- left sidenav -->
	<md-sidenav view-model.ref="sideNavLeft">

	<template>
	<a md-sidenav-collapse="ref.bind: sideNav;" md-button md-waves>Toggle SideNav</a>
	<md-sidenav view-model.ref="sideNav">
	<ul>
	<li md-waves><a href="#">About</a></li>
	<li md-waves><a href="#">Installation</a></li>
	<li md-waves><a href="#">Project Status</a></li>
	<li md-waves><a href="#">Help/Docs</a></li>
	</ul>
	</md-sidenav>

	<template>
	<style>
	.card .card-content p.more-space {
	margin: 20px 0;
	}
	[md-pushpin] a {
	padding-left: 20px;
	}
	[md-pushpin] a.active {
	font-weight: 500;

	<template>
	<div md-scrollfire>
	<div md-scrollfire-target="callback.call: firstTarget(); offset: 400;">Target #1</div>
	<div>
	<p>
	Scroll down to see Scrollfire in action.
	</p>
	</div>
	<div>
	<ul ref="list">