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

toast: toasts should always be displayed in the visible viewport #1106

Open
ilanbiala opened this issue Jan 4, 2015 · 59 comments
Open

toast: toasts should always be displayed in the visible viewport #1106

ilanbiala opened this issue Jan 4, 2015 · 59 comments
Assignees
@Splaktar
Labels
- Breaking Change - Lots of Comments needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community P3: important Important issues that really should be fixed when possible. type: bug ui: CSS ui: layout ux: polish
Milestone
1.3.0

Comments

@ilanbiala
Copy link
Contributor

Toasts should ideally be visible no matter where I am on the screen if I give no container element and set the position to one of the corners. Thoughts on setting it to position: fixed; in this case?
@ThomasBurleson ThomasBurleson added this to the Backlog milestone Jan 6, 2015
@epelc
Copy link
Contributor

epelc commented Jan 7, 2015

@ilanbiala I think it might be how it is now so that it can bump the md-fab buttons up a bit when it opens.

Also it moves correctly when I scroll are you sure you're using md-content correctly? If so could you please make a plunker so we can confirm this.

@rschmukler
Copy link
Contributor

I'm looking into a good solution for this. The reason that a simple position fixed doesn't work is because, what if there's a fab button? What if there's a toolbar?

I'll be looking into a good solution for 0.7.1

@rschmukler rschmukler modified the milestones: 0.7.1, Backlog Jan 8, 2015
@naomiblack naomiblack modified the milestones: 0.7.1, 0.8.0 Jan 26, 2015
@ilanbiala ilanbiala mentioned this issue Feb 4, 2015
Closed
@rschmukler rschmukler mentioned this issue Feb 7, 2015
Closed
@dguralnick
Copy link

To me it seems the toast scrolling around is much more broken than it eclipsing a FAB or toolbar for a few seconds. Toast is used for short-term important things we definitely want the user to see.

@epelc
Copy link
Contributor

epelc commented Feb 13, 2015

I'd rather wait for a better fix. If a toast goes over a fab it will be hard to read anyways so it hardly seems better than the current situation.

I'd say just apply the position:fixed locally if you prefer that.

@robertmesserle robertmesserle modified the milestones: 0.9.0, 0.8.0 Feb 19, 2015
@rschmukler rschmukler mentioned this issue Feb 19, 2015
Closed
@srdone srdone mentioned this issue Mar 17, 2015
Closed
@rschmukler rschmukler modified the milestones: 0.10.0, 0.9.0, 1.0-beta1 Apr 2, 2015
@rschmukler
Copy link
Contributor

Pseudo code implementation for toast onShow... for future reference

onShow() {
  var fabs = document.querySelectorAll('md-fab');
  var intersectingFabs = fabs.filter(willIntersect);
  options.intersectingFabs = intersectingFabs;

  angular.forEach(intersectingFabs, function(el) {
    el.classList.add('md-toast-intersecting') // transition animation
    if (position.indexOf('top') != -1) el.classList.add('md-toast-enter-from-top'); // set position accordingly
  })

  var toolbars = document.querySelectorAll('md-toolbar');
  var intersectingToolbars = toolbars.filter(willIntersect);  
  if (intersectingToolbars.length) {
    element.addClass('md-with-toolbar') // change position relatively
    element.style.top = calculateOffsetToNotIntersect(element, intersectingToolbars[0]);
  }

}

@gio82

This comment has been minimized.

Sign in to view
@Hrafnkellos

This comment has been minimized.

Sign in to view
@smehrbrodt smehrbrodt mentioned this issue Jun 18, 2015
Closed
@Jarema

This comment has been minimized.

Sign in to view
@charliewynn
Copy link

charliewynn commented Jun 30, 2015 •
edited by Splaktar
Loading

I'm on the 'always show' team. Suppose you have two fab buttons, user is about to click the bottom one, then a toast pushes them both down and the click the wrong one.. Buttons shouldn't move around unexpectedly.

I just edited my angular-material.js file: line 11979 'md-' -> 'md-fixed-'

then in my css

md-toast {
    z-index: 10000;
}
.md-fixed-top {
    position: fixed;
    top: 66px; // size of my navbar + 16px
}

.md-fixed-right {
    position: fixed;
    right: 16px;
}

... etc for left/bottom

@ThomasBurleson ThomasBurleson added the needs: team discussion This issue requires a decision from the team before moving forward. label Jul 11, 2015
@Splaktar Splaktar added ui: CSS ui: layout ux: polish and removed P1: urgent Urgent issues that should be addressed in the next minor or patch release. labels Dec 10, 2017
@Pedrazl
Copy link

Pedrazl commented Feb 9, 2018

+1 @BigBadaboom workaround. Thanks!

@develuxe
Copy link

In case it is helpful for others, here is the simple workaround that worked for me. Other solutions listed above didn't suit my situation.

Add the following element to the end of your <body> section:

<div id="toast-container"></div>

Then specify this container when you create your toast:

var toast = $mdToast.simple().textContent(msg)
                             .parent($("#toast-container"));
$mdToast.show(toast);

Finally, add the following rule to your CSS:

#toast-container
{
  position: fixed;
  bottom: 0;
  z-index: 999;
  overflow: visible !important;
}

The overflow property is necessary to allow the animation to work.

Great workaround, thank you! I also had to override the style for smaller screens (smartphone):
md-toast { position: fixed !important; }

@Splaktar Splaktar changed the title Position fixed $mdToast toast: toasts should always be displayed in the visible viewport Sep 29, 2018
@Splaktar
Copy link
Contributor

I really appreciate people helping others in this thread and posting constructive ideas and feedback!

However, while there are a lot of rough descriptions and ideas in this thread, I don't see any CodePen demos that clearly demonstrate the issue. If I missed one (I tried to read all of the comments), please just re-post the CodePen link for me.

Can anyone submit a CodePen demo that clearly demonstrates the problem so that I can consider and verify a solution?

@Splaktar Splaktar added needs: demo A CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community and removed needs: Pull Request labels Sep 29, 2018
@Splaktar Splaktar assigned Splaktar and unassigned devversion Sep 29, 2018
@Splaktar
Copy link
Contributor

Requested CodePen reproduction not provided.

@Splaktar Splaktar removed this from the - Backlog milestone Feb 15, 2019
@Splaktar Splaktar removed the needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community label Feb 15, 2019
@BigBadaboom
Copy link

There is a codepen in the bug #3539 which was marked a duplicate of this one.

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

Here's another one. The toast appears off screen. (Click the button and then scroll down quickly to see the toast).

https://codepen.io/PaulLeBeau/pen/ErdBrx

@Splaktar
Copy link
Contributor

@BigBadaboom thank you.

I updated the first to 1.1.12 and forked the second for future investigation.

@Splaktar Splaktar reopened this Feb 16, 2019
@Splaktar Splaktar added needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community and removed for: external contributor needs: demo A CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue labels Feb 16, 2019
@Splaktar Splaktar added this to the 1.2.0 milestone Feb 16, 2019
@chadian chadian mentioned this issue Mar 19, 2019
Closed
@Splaktar Splaktar modified the milestones: 1.2.0, 1.3.0 Jul 30, 2020
@Splaktar Splaktar mentioned this issue Dec 16, 2020
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Splaktar Splaktar

Labels
- Breaking Change - Lots of Comments needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community P3: important Important issues that really should be fixed when possible. type: bug ui: CSS ui: layout ux: polish
Projects
None yet
Milestone
1.3.0
Development

No branches or pull requests