Internal links do not work with text-only template

[eddelbuettel]

Bugs

Internal links to not work in very simple website based on the text-only template

What MDL Version are you using? (please be specific, e.g. major.minor.patch)

1.2.1 1.3.0

What browser(s) is this bug affecting (including version)?

Chrome Firefox

What OS (and version) are you using?

Ubuntu 16.04 Android 7

What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?

A draft version of the site is at this link

What is the expected behavior?

Navigation at the top panel work (ie click on links 'Program', 'Registration', 'Travel). One can navigate back and forth.

But any links with the same href="#tag" in either the main body or footer do not work.

What is the actual behavior?

Nothing.

No refresh / rerender when link is selected from main body or footer.

Any other information you believe would be useful?

Nothing I can think of. It is of course entirely possible I am overlooking something simple.

[Garbee]

The tab links are setup to trigger the content changes. The links within the content aren't setup to do that. This is one case where MDL was not built to handle, so it is on developers to make this kind of functionality work if they want it.

[eddelbuettel]

Really appreciate the quick reply. I essentially inferred that links should work ... because the very template I followed has such context changes. Maybe the example should not have them?

To the JS noob that I am: How would I go about making the standard href="..." link more potent and triggering the change?

[Garbee]

The template does not have internal nav links like that. The links it does have are within the Features section and they are standard anchor links. (Which are actually problematic sharing those.)

I don't have JS off-hand to show as an example since as I recall we don't expose an API point to change tabs. It's all handled internally based on those nav links.

Sorry, Layout (especially with the top-level tabs) are extremely half-baked in MDL. We didn't think through more complex usage when developing the initial build. And once we launched at V1 things were kind-of stuck. Material Components for Web (previously MDL v2) should make these kinds of cases much easier to handle since all of the components are isolated and will have expansive API coverage.

[eddelbuettel]

No worries. I am "just" using MDL at this point to refresh an older Bootstrap v2/v3 site. I can live without the feature. But do note that most of these links in your supplied template fail:

/var/www/html/mdl$ grep feature index.html 
    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
          <a href="#features" class="mdl-layout__tab">Features</a>
          <a href="#features" class="mdl-layout__tab">Details</a>
          <a href="#features" class="mdl-layout__tab">Technology</a>
          <a href="#features" class="mdl-layout__tab">FAQ</a>
                <a href="#" class="mdl-button">Read our features</a>
                <a href="#" class="mdl-button">Read our features</a>
                <a href="#" class="mdl-button">Read our features</a>
        <div class="mdl-layout__tab-panel" id="features">
/var/www/html/mdl$ 

That's verbatim from the mdl-template-text-only template.

[Garbee]

You are absolutely correct, there are anchors to the features section. Here is the complete context:

 <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
        </div>
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
          <h3>Name &amp; Title</h3>
        </div>
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
        </div>
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
          <a href="#overview" class="mdl-layout__tab is-active">Overview</a>
          <a href="#features" class="mdl-layout__tab">Features</a>
          <a href="#features" class="mdl-layout__tab">Details</a>
          <a href="#features" class="mdl-layout__tab">Technology</a>
          <a href="#features" class="mdl-layout__tab">FAQ</a>
          <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="add">
            <i class="material-icons" role="presentation">add</i>
            <span class="visuallyhidden">Add</span>
          </button>
        </div>
      </header>

They all exist only in the tab bar. This will trigger the content change since they are the tab bar and are where we bind the events internally to. None of these exist within any of the page content.

[eddelbuettel]

Right, but why add an example like this:

              <div class="mdl-card__actions">
                <a href="#" class="mdl-button">Read our features</a>
              </div>

or

            <div class="mdl-mega-footer--drop-down-section">
              <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
              <h1 class="mdl-mega-footer--heading">Features</h1>
              <ul class="mdl-mega-footer--link-list">
                <li><a href="#">About</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">Updates</a></li>
              </ul>
            </div>

when none of these can work? I grant that they do not link into #features but they are functionally equivalent and give the impression we could link into tabs.

But now I know we can't which is a little frustrating. I'll make do though.

[Garbee]

It's just an example template. They aren't built to be fully functioning demos.

[eddelbuettel]

Understood. We are all coders, and documentation and examples are hard. I fell for he various links and buttons labeled Read our Features which, coupled with a tab named Features, made me think I could get from A to B. Alas...

[Garbee]

Yea sorry. We probably should have been clearer about the demo templates not being fully wired up like other projects do. It is variable the extent of demos. We went for some basics just to show different components together. However short of providing fully functioning examples that show all the dynamic stuff (especially since we didn't really target highly dynamic stuff with v1.)