0

JsFiddle here.

I am using Material Design Lite. Now in the header, I need a Title row, a row which shows description (labelled Story and then Story story story... in the following screenshot), and then a row which is the tabs bar.

Now I also want the Material Design Lite's waterfall header effect, in which all header rows except the Title row go invisible as the user scrolls down. But I want it in a way that the tabs row (tabs bar, the one which show tabs' headers/titles) remains visible, just like the Title row as the user scrolls down.

What I tried:

I thought that removing the tabs bar from the <header> and placing it right below the header (and giving it the same background-color etc. as the header ) will make the tab bar appear to the user as a part of the header, but since it will actually Not be a part of the header, so it will not get the waterfall effect, i.e. it will not go invisible when the user scrolls down the page.

But to my surprise, even when I do not put the section.tabs-bar inside the <header>, it still gets the waterfall effect, i.e. it still goes invisible when the user scrolls down the page.

So the question is that what should I do? How to make the section.tabs-bar NOT go invisible when the user scrolls down the page.

VERY IMPORTANT NOTE:

In JSFiddle, the output panel is small, and since Material Design Lite is responsive, so the header row of Title and that of description is not displayed at all. But I am adding screenshots of what it looks like on localhost.

When the user has NOT scrolled:

enter image description here

WHEN THE USER HAS SCROLLED DOWN THE PAGE:

enter image description here

Shy
  • 542
  • 8
  • 20

1 Answers1

2

Okay, I think I know what you're after.

Short answer: move the .task-bar out of the main JSfiddle

Hope it helps!

Note: The link that I was pointing to earlier was: https://stackoverflow.com/help/mcve

An MCVC just helps those wanting to help you.

Update: Add this CSS:

.mdl-layout__content {
  overflow: hidden;
}

.mdl-tabs.is-upgraded .mdl-tabs__panel {
  overflow-y:scroll;
  height: calc(100vh - 50px);
}

JSfiddle

Note: In the future, keep in mind that you're asking for others to help you. We have no obligation to do so.

Community
  • 1
  • 1
Chris Happy
  • 7,088
  • 2
  • 22
  • 49
  • Hey you messed up my tabs. In your fiddle, scroll to the bottom of the page, and you will see that the content of each tab (in different colors) is displayed one after the other, in the body of only one tab. – Shy Jan 05 '17 at 09:31
  • You do understand what I want. Thing is, those `ALPHA`, `BETA` and `GAMMA` are headers of _tabs_. Please compare my fiddle with yours. In _my_ fiddle, clicking on `BETA` will _hide_ previously displayed tab content, and display new tab content (with a yellowish background color, compared to previous reddish background color). Likewise clicking on `GAMMA` will reveal content different from previously displayed content (this one has background color of grey) – Shy Jan 06 '17 at 04:53
  • @Sie Now in _your_ fiddle, run the code and then scroll down the output window. The content for all the three tabs is displayed in the place for content for the first tab, that is pink, then yellow and then grey content. AND clicking on other tab headers (i.e. `BETA` and `GAMMA`) does not reveal anything. – Shy Jan 06 '17 at 04:58
  • It is an MCVE. JS comes from the external resource `material.min.js`. In the left side menu, expand the node titled `External Resources` on the JSFiddle website. – Shy Jan 06 '17 at 06:04
  • Anyways, the important thing here is that you messed up my tabs. =P Fix them =P – Shy Jan 06 '17 at 06:05
  • About the note you added in the question, I was joking. I am sorry! – Shy Jan 06 '17 at 06:45
  • Like I mentioned in the question, I CAN NOT use a _fixed height_ because that way, the waterfall effect gets removed from the header as well. I DO NOT want that. – Shy Jan 06 '17 at 07:00
  • It's a responsive height. 1vh is equal to 1% of the height of the container. -50px is for the header on the top. Just use @media tags to adjust it when the title gets added. – Chris Happy Jan 06 '17 at 17:20