CSS media query for md-toolbar - css

Question

I have a md-toolbar from Angular material 2 which is fixed on the page
<md-toolbar id="floating-toolbar" color="primary"></md-toolbar>
<md-progress-bar *ngIf="true" class="floating-progress" mode="indeterminate" color="accent"></md-progress-bar
#floating-toolbar {
position: fixed;
z-index: 1001;
}
I want to put a progress bar underneath that fixed tool-bar. What I am finding that AngularMaterial2's md-toolbar height changes based on the screen width. So I have painfully worked out the following by looking at the view port
#media (max-width: 599px){
.floating-progress {
position: fixed;
margin-top: 56px;
z-index: 1002;
}
}
#media (min-width: 600px) and (max-width: 650px){
.floating-progress {
position: fixed;
margin-top: 64px;
z-index: 1002;
}
}
#media (min-width: 651px) and (max-width: 959px){
.floating-progress {
position: fixed;
margin-top: 48px;
z-index: 1002;
}
}
#media (min-width: 960px) {
.floating-progress {
position: fixed;
margin-top: 64px;
z-index: 1002;
}
}
This seems to work ONLY when the height of the page is full screen on my desktop though. As soon as I reduce the height (Simulating a smaller screen or screen in portrait, these rule are no longer valid as the tool bar's height seems to be a variable of the both width AND height.
Is there a way to easily fix this such as simply snapping the progress bar below that fixed position tool bar.
I have found this in the md-toolbar's scss file which may help?
//toolbar.scss
$md-xsmall: 'max-width: 600px';
$md-small: 'max-width: 960px';
$md-toolbar-height-desktop: 64px !default;
$md-toolbar-height-mobile-portrait: 56px !default;
$md-toolbar-height-mobile-landscape: 48px !default;
$md-toolbar-font-size: 20px !default;
$md-toolbar-padding: 16px !default;
#mixin md-toolbar-height($height) {
md-toolbar {
min-height: $height;
}
md-toolbar-row {
height: $height;
}
}
md-toolbar {
display: flex;
box-sizing: border-box;
width: 100%;
// Font Styling
font-size: $md-toolbar-font-size;
font-weight: 400;
font-family: $md-font-family;
padding: 0 $md-toolbar-padding;
flex-direction: column;
md-toolbar-row {
display: flex;
box-sizing: border-box;
width: 100%;
// Flexbox Vertical Alignment
flex-direction: row;
align-items: center;
}
}
// Set the default height for the toolbar.
#include md-toolbar-height($md-toolbar-height-desktop);
// Specific height for mobile devices in portrait mode.
#media ($md-xsmall) and (orientation: portrait) {
#include md-toolbar-height($md-toolbar-height-mobile-portrait);
}
// Specific height for mobile devices in landscape mode.
#media ($md-small) and (orientation: landscape) {
#include md-toolbar-height($md-toolbar-height-mobile-landscape);
}
/*toolbar.css*/
md-toolbar,md-toolbar md-toolbar-row {
display:flex;
box-sizing:border-box;
width:100%
}
md-toolbar{
font-size:20px;
font-weight:400;font-family:
Roboto,"Helvetica Neue",sans-serif;
padding:0 16px;
flex-direction:column;
min-height:64px
}
md-toolbar md-toolbar-row{
flex-direction:row;
align-items:center
}
md-toolbar-row{
height:64px
}
#media (max-width:600px) and (orientation:portrait){
md-toolbar{
min-height:56px
}
md-toolbar-row{
height:56px
}
}
#media (max-width:960px) and (orientation:landscape){
md-toolbar{
min-height:48px
}
md-toolbar-row{
height:48px
}
}

Answer 1

I have solved this by putting the md-toolbar and md-progress bar inside a floating-header-div class as one unit. That way progress bar is always below the toolbar regardless of the size
<!--floating header-->
<div class="floating-header-div">
<md-toolbar>
<button md-icon-button class="ml-xs toolbar-button" (click)="sidenav.toggle()">
<md-icon id="menu-icon">menu</md-icon>
</button>
<span id="app-title">MyApp</span>
</md-toolbar>
<md-progress-bar *ngIf="isLoading" mode="indeterminate" color="accent"></md-progress-bar>
</div>
/*------------------------------*/
/*tool bar*/
/*------------------------------*/
.floating-header-div {
position: fixed;
z-index: 999;
width: 100%;
}