Position Action Sheet

[rmsint]

What would you advise to position an Action Sheet?
For buttons that are on the edge of the screen the positioning should be changed ie. to the right to prevent the menu being cutoff.

For a project at my company we just upgraded to 2.x, thanks a lot for continuing this project!

Maybe something similar as md-position-mode of the angular material menu is possible for the Action Sheet?

[tolyo]

@rmsint Used dropdown from foundation 5 for similar case.

[soumak77]

I'm actually quite surprised that position right and left are not supported for action sheets. I'll leave this issue open for anyone that wants to add support for that.

@rmsint In the meantime you can position action sheets with the following CSS:

.action-sheet {
  transform: translateX(-70px) translateY(20px); // position body
  &::before, &::after {
    left: 10%;  // position arrow
  }
}

I used this solution to position the menu dropdowns on https://parents.fiboart.com

[rmsint]

Thanks a lot, the link is a nice example! Interesting to see in action how you solved it. Offtopic: also how you switch between a menu bar and offcanvas menu for mobile navigation is very nice.