Provide mixin for #contentContainer in app-drawer-layout and app-header-layout

[JeanRemiDelteil]

Who will use the feature?

• Users with complex layout

When will they use the feature?

• this will address some complex cases when we need to apply CSS on the contentContainer directly

What is the user’s goal?

• In my case, it will allows to overwrite the #contentContainer { z-index: 0 } rule to get :
  • app-drawer-layout to works with drop-down menus (above the drawer)
  • app-header-layout to works with paper-dialog

[web-padawan]

In general, overriding z-index is not supposed. In our team we just use app-drawer and app-header to build complex layouts.

[JeanRemiDelteil]

I agree with that, as z-index play part with the layout.

But how do you use paper-dialog with app-header-layout ? On my app it forces the iron-overlay-backdrop above the dialog, because the #contentContainer got a z-index: 0

Same for app-drawer-layout. And there are still things really annoying to do without the layout elements.

[web-padawan]

But how do you use paper-dialog with app-header-layout ?

We don't use neither app-drawer-layout nor app-header-layout, but not only because of this. we created our own wrapper element which contains app-header and app-drawer and allows to show drawer on hover, toggle it on desktop devices and save its state to local storage etc.

[frankiefu]

As @web-padawan mentioned, you don't have to use app-drawer/header-layout. We provide app-drawer/header-layout to support the general use case, but we also support using app-header and app-drawer independently. In general, if you find yourself needing to change the internal styles in app-drawer/header-layout that usually indicates is better off to not relying on them. Take a look at the app-header's demos, they show how to use app-header without app-header-layout. Also take a look at this thread which talks about the underlying issue and workarounds.

[govis]

+1 for a css mixin for <div id="contentContainer"> in app-header-layout

[emersonbottero]

I need a mixin for paper-header in paper-header-layout because the background image could have a white background ant the text is also white. if I add a black background with transparency it look always god. The user can put any image in my app. I get that we shouldn't mess with z-index but this shouldn't be a good example to add the mixin?

is not readable otherwise.

for now i did this

ready(){ super.ready(); //add a transparent black so the white text is visiable this.$.hd.$.contentContainer.style.backgroundColor = "#00000033"; }