Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

md-subheader / sticky discussion #3535

Closed
ghost opened this issue Jul 1, 2015 · 6 comments
Closed

md-subheader / sticky discussion #3535

ghost opened this issue Jul 1, 2015 · 6 comments
Assignees
@topherfangio
Labels
pr: merge ready This PR is ready for a caretaker to review type: enhancement
Milestone
1.0-rc1

Comments

@ghost
Copy link

ghost commented Jul 1, 2015

I don't like how md-subheader wraps whatever I put into it an h2. There also doesn't seem to be any other option to make something sticky.
I wanted to make a card sticky (customer summary header), but no way to do it.

If you have 2 md-contents side by side with a md-subheader, this happens:

http://codepen.io/robertbaker/pen/bdLgmr
@dmackerman
Copy link

Yeah. md-subheader should be unique per md-content, but it appears not.

@ThomasBurleson
Copy link
Contributor

@robertbaker -

  1. The $mdSticky service prepends the subheader clone to the parent of the mdContent container. Since the sticky subheader is positioned absolute, I think we could prepend it instead to the mdContent itself... which would then support side-by-side mdContent containers.

It would awesome if you would submit a PR for this feature.

  1. If you want to make something else sticky, you may need to create a md-sticky attribute directive; but I do not believe that is part of the Material specs.

@rschmukler - sounds like (1) above is a bug?

@ThomasBurleson ThomasBurleson added this to the 1.0-beta1 milestone Jul 2, 2015
@naomiblack
Copy link
Contributor

@topherfangio can you look at (1) and see if it's a bug?

@naomiblack naomiblack modified the milestones: 0.12.0, 1.0-beta1 Aug 14, 2015
@topherfangio
Copy link
Contributor

  1. I need to dig in a bit further, but I don't currently see any reason to use an <h2> tag. I will try to switch this to a <div>.

  2. I will play around to see if we can attach it to a different place. A quick workaround we found in another issue was to wrap the <md-content> tags with <div style='position: relative'>. If it's truly as simple as this, we should be able to create a better fix.

@topherfangio topherfangio added the needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community label Aug 15, 2015
@topherfangio
Copy link
Contributor

  1. I have switch to a <div> and all tests pass, and everything looks good from a visual inspection. The SCSS also doesn't target the H2, so I see no reason not to swap it.

  2. I have attached it directly to the md-content, but this causes a side-effect: In the current version, as you scroll, the sticky header appears on top of the content, so the scrollbar actually disappears underneath it (at least in Chrome; in Firefox it looks like the picture below). With the updates, it appends inside the scrollable area, so you see the scrollbar to the right of the floating header:

subheader-scrollbar-issue

This is almost certainly the reason it appends to the parent. Which one do you feel is better behavior?

topherfangio added a commit that referenced this issue Aug 21, 2015
@topherfangio
fix(subheader/sticky): Stick subheader to content instead of parent.
35ff310 
The `$mdSticky` service used to stick it's contents to the parent
of the `<md-content>` container. This resulted in some odd styling
issues an the inability to have two lists with sticky subheaders
side-by-side.

This fix appends the subheaders directly to the `<md-content>` to
fix this issue.

Also, updated subheaders to use `<div>` tags instead of `<h2>`.

fixes #3535
topherfangio added a commit that referenced this issue Aug 21, 2015
@topherfangio
fix(subheader/sticky): Stick subheader to content instead of parent.
38b7c7d 
The `$mdSticky` service used to stick it's contents to the parent
of the `<md-content>` container. This resulted in some odd styling
issues and the inability to have two lists with sticky subheaders
side-by-side.

This fix appends the subheaders directly to the `<md-content>` to
fix this issue.

Also, updated subheaders to use `<div>` tags instead of `<h2>`.

fixes #3535
@topherfangio topherfangio mentioned this issue Aug 21, 2015
Closed
topherfangio added a commit that referenced this issue Aug 24, 2015
@topherfangio
fix(subheader/sticky): Stick subheader to content instead of parent.
9ac9bc2 
The `$mdSticky` service used to stick it's contents to the parent
of the `<md-content>` container. This resulted in some odd styling
issues and the inability to have two lists with sticky subheaders
side-by-side.

This fix appends the subheaders directly to the `<md-content>` to
fix this issue.

Also, updated subheaders to use `<div>` tags instead of `<h2>`.

fixes #3535
topherfangio added a commit that referenced this issue Aug 24, 2015
@topherfangio
fix(subheader/sticky): Stick subheader to content instead of parent.
3ab66b3 
The `$mdSticky` service used to stick it's contents to the parent
of the `<md-content>` container. This resulted in some odd styling
issues and the inability to have two lists with sticky subheaders
side-by-side.

This fix appends the subheaders directly to the `<md-content>` to
fix this issue.

Also, updated subheaders to use `<div>` tags instead of `<h2>`.

fixes #3535
@topherfangio topherfangio added pr: merge ready This PR is ready for a caretaker to review and removed needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community labels Aug 24, 2015
@clshortfuse
Copy link
Contributor

now md-content must be at the top of the page:

#4420

http://codepen.io/anon/pen/zvYJNB

The original issue posted here can be fixed as I had shown here: #3918

kennethcachia pushed a commit to kennethcachia/material that referenced this issue Sep 23, 2015
@topherfangio @kennethcachia
fix(subheader/sticky): Stick subheader to content instead of parent.
1cf9859 
The `$mdSticky` service used to stick it's contents to the parent
of the `<md-content>` container. This resulted in some odd styling
issues and the inability to have two lists with sticky subheaders
side-by-side.

This fix appends the subheaders directly to the `<md-content>` to
fix this issue.

Also, updated subheaders to use `<div>` tags instead of `<h2>`.

fixes angular#3535. closes angular#4276.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@topherfangio topherfangio

Labels
pr: merge ready This PR is ready for a caretaker to review type: enhancement
Projects
None yet
Milestone
1.0-rc1
Development

Successfully merging a pull request may close this issue.

fix(subheader/sticky): Stick subheader to content instead of parent. angular/material
5 participants
@topherfangio @ThomasBurleson @dmackerman @naomiblack @clshortfuse