md-toolbar background-color: transparent not working

Question

I've been banging my head on this one for a while....i have no idea why the background of my md-toolbar remains white even though i change the CSS.

I have a sample of my project here:

http://abc.morado.xyz:32782/#/index

my default HTML page that renders all the views looks like this:

<div layout="row" class="full-height transparent">
<!-- left sidebar -->

<!--<md-sidenav class="admin-sidebar-left md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="layout.sideMenuSize !== 'hidden' && $mdMedia('gt-sm')" ui-view="sidebarLeft" ng-class="{ 'admin-sidebar-collapsed': layout.sideMenuSize == 'icon' }" ng-mouseover="layoutController.activateHover()" ng-mouseleave="layoutController.removeHover()"></md-sidenav>-->

<!-- main content -->
<div id="admin-panel" layout="column" flex class="transparent">
    <!-- loading animation -->
    <tri-loader></tri-loader>

    <!-- top toolbar -->
    <md-toolbar class=" transparent" ng-if="layout.showToolbar" md-theme="{{triSkin.elements.toolbar}}" ui-view="toolbar" ng-class="[layout.toolbarSize,layout.toolbarClass]"></md-toolbar>

    <!-- scrollable content -->
    <md-content ng-class="layout.contentClass" flex tri-default-content ui-view="content"></md-content>

    <div ui-view="belowContent"></div>
</div>

<!-- right sidebar -->
<md-sidenav layout layout-fill class="md-sidenav-right md-whiteframe-z2" md-component-id="notifications" ui-view="sidebarRight"></md-sidenav>

And the header gets rendered in my config file:

.state('triangular.header', {
            abstract: true,
            views: {
                toolbar: {
                    templateProvider: function($templateCache, $http, triLayout) {
                        return $http.get(triLayout.layout.toolbarTemplateUrl, {cache: $templateCache })
                            .then(function(response) {
                                return response.data;
                            });
                    },
                    controllerProvider: function(triLayout) {
                        return triLayout.layout.toolbarController;
                    },
                    controllerAs: 'vm'
                },
                content: {
                    templateProvider: function($templateCache, $http, triLayout) {
                        return $http.get(triLayout.layout.contentTemplateUrl, {cache: $templateCache })
                            .then(function(response) {
                                return response.data;
                            });
                    }
                },
                belowContent: {
                    template: '<div ui-view="belowContent"></div>'
                }
            }
        })

I've seen these solutions online but they dont work in my case...

https://github.com/angular/material/issues/4379

My own styles in angular material ui

If you go to my link above and try playing with the CSS yourself, you'll find that setting the background on either the md-toolbar tag or the div inside said tag, only makes the background an opaque white.

Thank you for your help!

CBroe · Accepted Answer · 2016-04-07T21:43:14.047

1

i have no idea when the background of my md-toolbar remains white even though i change the CSS

The background of that element is transparent, as you have specified in your CSS.

The white you see is simply the background of the body element.

edited Apr 07 '16 at 21:43

answered Apr 07 '16 at 21:36

CBroe

91,630
14
92
150

I'm not seeing where you see that the `#admin-panel` `background-color` is white? – Dominooch Apr 07 '16 at 21:42
Sorry, you’re right, it isn’t that one – it is simply the body background. But I am not sure how you were expecting any different result here to begin with – that when an element has transparent background, whatever lies below it will “shine through”, is only natural. – CBroe Apr 07 '16 at 21:43
So, in that case is there anyway to make a sticky header toolbar and not have any background? kind of like in this example? https://projects.invisionapp.com/share/HU6O2XEY7/#/screens/146030680 – Dominooch Apr 07 '16 at 21:48
My point rather is, if the background is transparent, why isnt the rest of the content (i.e. pictures et all) not shining through? – Dominooch Apr 07 '16 at 21:55
Well that’s because you only made the content inside of the `md-content` element scrollable, but not the whole page as a whole. – CBroe Apr 07 '16 at 21:58

md-toolbar background-color: transparent not working

1 Answers1