Friday, May 17, 2024
Homepage · html
 Popular · Latest · Hot · Upcoming
96
rated 0 times [  100] [ 4]  / answers: 1 / hits: 64151  / 7 Years ago, mon, november 6, 2017, 12:00:00

For my Website I'm attempting to lock the < Mat-Toolbar > to the top of the screen and then directly under that I want to lock the < Mat-Tabs > .



The issue I'm running into is that position: fixed in CSS is not locking it at all, and when I actually go to the site and inspect element it's putting in a < div >



enter



How am I supposed to lock these two elements to the top, how am I supposed to bypass this auto created Div? I had a previous question similar to this but I solved that using Fixed and Absolute positioning, which that does not apply in this newer version of Angular/ Angular Material.



Source Code for my Website


More From » html
 Answers
14

Did you mean a sticky toolbar?



Just add a class to the toolbar and make it sticky (using the position attribute set to sticky):



.app-toolbar {

    position: sticky;

    position: -webkit-sticky; /* For macOS/iOS Safari */

    top: 0; /* Sets the sticky toolbar to be on top */

    z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */

}




Note: There is no support for position: sticky on IE 11. For more info on browser support for position: sticky, view this caniuse page.


[#55998] Friday, November 3, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
tayla
Add To Favorites
Follow
Total Points: 681
Total Questions: 102
Total Answers: 108
Location: Marshall Islands
Member since Tue, Sep 21, 2021
3 Years ago
tayla questions
Fri, Mar 5, 21, 00:00, 3 Years ago
Wed, Oct 28, 20, 00:00, 4 Years ago
Wed, Oct 21, 20, 00:00, 4 Years ago
Sat, Jul 4, 20, 00:00, 4 Years ago
Thu, Apr 9, 20, 00:00, 4 Years ago
View All
;